Upgrade css-loader and CSS Modules syntax

Author: markdalgleish

package.json

@@ -24,7 +24,7 @@
     "autoprefixer-core": "^5.1.11",
     "babel-core": "^5.2.17",
     "babel-loader": "^5.0.0",
-    "css-loader": "^0.14.4",
+    "css-loader": "^0.15.1",
     "ejs": "^2.3.1",
     "extract-text-webpack-plugin": "^0.8.1",
     "file-loader": "^0.8.4",

src/components/3-ClassInheritance/ClassInheritance.js renamed to src/components/3-ClassComposition/ClassComposition.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import StyleVariantA from './StyleVariantA/StyleVariantA';
 import StyleVariantB from './StyleVariantB/StyleVariantB';
 
-export default class ClassInheritance extends Component {
+export default class ClassComposition extends Component {
 
   render() {
     return (

src/components/3-ClassInheritance/ClassInheritanceDemo.js renamed to src/components/3-ClassComposition/ClassCompositionDemo.js

@@ -1,4 +1,4 @@
-import ClassInheritance from './ClassInheritance';
+import ClassComposition from './ClassComposition';
 
 import React, { Component } from 'react';
 
@@ -8,7 +8,7 @@ import layoutCss from '!!raw!shared/styles/layout.css';
 import typographyCss from '!!raw!shared/styles/typography.css';
 import Snippet from 'shared/Snippet/Snippet';
 
-export default class ClassInheritanceDemo extends Component {
+export default class ClassCompositionDemo extends Component {
 
   render() {
     const files = [
@@ -20,7 +20,7 @@ export default class ClassInheritanceDemo extends Component {
 
     return (
       <Snippet files={files}>
-        <ClassInheritance />
+        <ClassComposition />
       </Snippet>
     );
   }

src/components/3-ClassComposition/StyleVariantA/StyleVariantA.css

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

src/components/3-ClassInheritance/StyleVariantA/StyleVariantA.js renamed to src/components/3-ClassComposition/StyleVariantA/StyleVariantA.js

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

src/components/3-ClassComposition/StyleVariantB/StyleVariantB.css

@@ -0,0 +1,11 @@
+.root {
+  composes: box from "shared/styles/layout.css";
+  border-style: dotted;
+  border-color: green;
+}
+
+.text {
+  composes: heading from "shared/styles/typography.css";
+  font-weight: 200;
+  color: green;
+}