Initial commit

Author: markdalgleish

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

README.md

@@ -0,0 +1,19 @@
+# CSS Modules Example
+
+A small working example of **CSS Modules**, using [Webpack]'s [css-loader] in [module mode].
+
+## Run the example
+
+```bash
+$ npm install
+$ npm start & open http://localhost:8080
+```
+
+## License
+
+[MIT]
+
+[Webpack]: http://webpack.github.io
+[css-loader]: https://github.com/webpack/css-loader
+[module mode]: https://github.com/webpack/css-loader/#module-mode
+[MIT]: http://markdalgleish.mit-license.org

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "css-modules-example",
+  "version": "1.0.0",
+  "description": "A small working example of CSS Modules, using Webpack's css-loader in module mode.",
+  "main": "index.js",
+  "scripts": {
+    "test": "webpack",
+    "start": "webpack-dev-server"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/markdalgleish/css-modules-example"
+  },
+  "author": "Mark Dalgleish",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/markdalgleish/css-modules-example/issues"
+  },
+  "homepage": "https://github.com/markdalgleish/css-modules-example",
+  "devDependencies": {
+    "babel-core": "^5.2.17",
+    "babel-loader": "^5.0.0",
+    "css-loader": "^0.14.0",
+    "ejs": "^2.3.1",
+    "extract-text-webpack-plugin": "^0.8.0",
+    "node-libs-browser": "^0.5.0",
+    "react": "^0.13.3",
+    "react-to-html-webpack-plugin": "^2.1.0",
+    "style-loader": "^0.12.2",
+    "webpack": "^1.9.8",
+    "webpack-dev-server": "^1.8.2"
+  }
+}

src/components/App.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+
+import HelloWorld from './HelloWorld/HelloWorld';
+import FooBar from './FooBar/FooBar';
+
+export default class App extends Component {
+
+  render() {
+    return (
+      <div>
+        <h1>CSS Modules Example</h1>
+
+        <p>On this page we have two components: <strong>HelloWorld</strong> and <strong>FooBar</strong>.</p>
+        <p>Both of these components have locally scoped CSS that inherit from a common set of CSS Modules.</p>
+        <p>Since CSS Modules can be composed, the resulting markup is optimised to reuse classes between components.</p>
+
+        <HelloWorld />
+        <br />
+        <FooBar />
+
+      </div>
+    );
+  }
+
+};

src/components/FooBar/FooBar.css

@@ -0,0 +1,9 @@
+.root {
+  extends: box from "styles/layout.css";
+  border-color: blue;
+}
+
+.text {
+  extends: heading from "styles/typography.css";
+  color: blue;
+}

src/components/FooBar/FooBar.js

@@ -0,0 +1,15 @@
+import styles from './FooBar.css';
+
+import React from 'react';
+
+export default class Demo extends React.Component {
+
+  render() {
+    return (
+      <div className={styles.root}>
+        <p className={styles.text}>FooBar</p>
+      </div>
+    );
+  }
+
+};

src/components/HelloWorld/HelloWorld.css

@@ -0,0 +1,9 @@
+.root {
+  extends: box from "styles/layout.css";
+  border-color: red;
+}
+
+.text {
+  extends: heading from "styles/typography.css";
+  color: red;
+}

src/components/HelloWorld/HelloWorld.js

@@ -0,0 +1,15 @@
+import styles from './HelloWorld.css';
+
+import React from 'react';
+
+export default class Demo extends React.Component {
+
+  render() {
+    return (
+      <div className={styles.root}>
+        <p className={styles.text}>HelloWorld</p>
+      </div>
+    );
+  }
+
+};

src/components/styles/layout.css

@@ -0,0 +1,7 @@
+.box {
+  border-width: 2px;
+  border-style: solid;
+  padding: 0 20px;
+  margin: 0 6px;
+  max-width: 400px;
+}