Updated examples.

Author: gajus

package.json

@@ -1,16 +1,16 @@
 {
   "private": true,
   "devDependencies": {
-    "babel-core": "^5.8.22",
+    "babel-core": "^5.8.25",
     "babel-loader": "^5.3.2",
-    "css-loader": "^0.16.0",
+    "css-loader": "^0.19.0",
     "extract-text-webpack-plugin": "^0.8.2",
-    "style-loader": "^0.12.3",
-    "webpack": "^1.12.0"
+    "style-loader": "^0.12.4",
+    "webpack": "^1.12.2"
   },
   "dependencies": {
-    "react": "^0.14.0-beta3",
-    "react-css-modules": "^3.0.1",
-    "react-dom": "^0.14.0-beta3"
+    "react": "^0.14.0-rc1",
+    "react-css-modules": "^3.5.1",
+    "react-dom": "^0.14.0-rc1"
   }
 }

src/UsingDecorator/car.css

@@ -1,13 +1,15 @@
 import React from 'react';
-import styles from './car.css';
 import CSSModules from 'react-css-modules';
+import styles from './../table.css';
 
 @CSSModules(styles)
 export default class extends React.Component {
     render () {
-        return <div styleName='car'>
-            <div styleName='front-door'>front-door</div>
-            <div styleName='back-door'>back-door</div>
+        return <div styleName='table'>
+            <div styleName='row'>
+                <div styleName='cell'>A0</div>
+                <div styleName='cell'>B0</div>
+            </div>
         </div>;
     }
 }

src/UsingDecorator/index.js

@@ -1,14 +1,16 @@
 import React from 'react';
-import styles from './car.css';
 import CSSModules from 'react-css-modules';
+import styles from './../table.css';
 
-class Car extends React.Component {
+class Table extends React.Component {
     render () {
-        return <div styleName='car'>
-            <div styleName='front-door'>front-door</div>
-            <div styleName='back-door'>back-door</div>
+        return <div styleName='table'>
+            <div styleName='row'>
+                <div styleName='cell'>A0</div>
+                <div styleName='cell'>B0</div>
+            </div>
         </div>;
     }
 }
 
-export default CSSModules(Car, styles);
+export default CSSModules(Table, styles);

src/UsingStyleName/car.css

@@ -0,0 +1,19 @@
+.table {
+    composes: table from './../table.css';
+}
+
+.row {
+    composes: row from './../table.css';
+}
+
+/* .cell {
+    composes: cell from './table.css';
+} */
+
+.table {
+    width: 400px;
+}
+
+.cell {
+    float: left; width: 154px; background: #eee; padding: 10px; margin: 10px 0 10px 10px;
+}

src/UsingStyleName/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './../table.css';
+
+class Table extends React.Component {
+    render () {
+        return <div styleName='table'>
+            <div styleName='row'>
+                <div styleName='cell'>A0</div>
+                <div styleName='cell'>B0</div>
+            </div>
+        </div>;
+    }
+}
+
+export default CSSModules(Table, styles);

src/UsingStylesProperty/custom.css

@@ -1,9 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import UsingstyleName from './UsingstyleName';
+
+import UsingStyleName from './UsingStyleName';
+
+import UsingStylesProperty from './UsingStylesProperty';
+import UsingStylesPropertyStyles from './UsingStylesProperty/custom.css';
+
 import UsingDecorator from './UsingDecorator';
 
 ReactDOM.render(<div>
-    <UsingstyleName />
+    <UsingStyleName />
+    <UsingStylesProperty styles={UsingStylesPropertyStyles} />
     <UsingDecorator />
 </div>, document.querySelector('#app'));

src/UsingStylesProperty/index.js

@@ -0,0 +1,21 @@
+.table {
+    width: 200px;
+}
+
+.table,
+.row,
+.cell {
+    margin: 10px; overflow: hidden;
+}
+
+.table {
+    border: 1px solid #000;
+}
+
+.row {
+    border: 1px solid #f00;
+}
+
+.cell {
+    border: 1px solid #00f; padding: 10px;
+}

src/index.js

@@ -55,8 +55,7 @@ module.exports = {
         ]
     },
     resolve: {
-        // Required for development only.
-        root: path.resolve(__dirname, 'node_modules'),
+        // root: path.resolve(__dirname, 'node_modules'),
         extensions: [
             '',
             '.js'