Add inheritance overrides example

Author: markdalgleish

package.json

@@ -21,16 +21,16 @@
     "autoprefixer-core": "^5.1.11",
     "babel-core": "^5.2.17",
     "babel-loader": "^5.0.0",
-    "css-loader": "^0.14.0",
+    "css-loader": "^0.14.3",
     "ejs": "^2.3.1",
-    "extract-text-webpack-plugin": "^0.8.0",
+    "extract-text-webpack-plugin": "^0.8.1",
     "node-libs-browser": "^0.5.0",
     "postcss-color-rebeccapurple": "^1.1.0",
     "postcss-loader": "^0.4.3",
     "react": "^0.13.3",
     "react-to-html-webpack-plugin": "^2.1.0",
     "style-loader": "^0.12.2",
-    "webpack": "^1.9.8",
+    "webpack": "^1.9.10",
     "webpack-dev-server": "^1.8.2"
   }
 }

src/components/App.js

@@ -3,6 +3,8 @@ import React, { Component } from 'react';
 import HelloWorld from './HelloWorld/HelloWorld';
 import FooBar from './FooBar/FooBar';
 
+import InheritanceOverrides from './InheritanceOverrides/InheritanceOverrides';
+
 import BouncingBall from './BouncingBall/BouncingBall';
 
 export default class App extends Component {
@@ -20,6 +22,10 @@ export default class App extends Component {
         <br />
         <FooBar />
 
+        <p>When extending classes, <strong>inherited style properties can be overridden</strong> as you'd expect.</p>
+        <p>The following component extends two different classes, but provides overrides which then take precedence.</p>
+        <InheritanceOverrides />
+
         <p>CSS Modules even provide <strong>locally scoped animations</strong>, which are typically defined in the global scope.</p>
         <p>The following <strong>BouncingBall</strong> component extends a <strong>".bounce"</strong> class from a separate animations module.</p>
         <p>The <strong>"bounce"</strong> keyframes are private to the animations module, only exposed via the <strong>".bounce"</strong> class to those that either extend from it or import it.</p>

src/components/InheritanceOverrides/InheritanceOverrides.css

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

src/components/InheritanceOverrides/InheritanceOverrides.js

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