Fix "Order in extracted chunk undefined" error

- Use temp fix documented here: webpack-contrib/extract-text-webpack-plugin#166 (comment)
- Above fix is included in webpack 2.0 and will be resolved in upgrade

package.json

@@ -46,7 +46,7 @@
     "eslint-plugin-jsx-a11y": "^3.0.2",
     "eslint-plugin-react": "^6.9.0",
     "exports-loader": "^0.6.3",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "github:michelebertoli/extract-text-webpack-plugin#614c3bb1ed72587218aa644df12bbf514fb77a06",
     "file-loader": "^0.9.0",
     "html-loader": "^0.4.4",
     "image-webpack-loader": "^3.1.0",

src/scripts/components/site-content/site-content.css

@@ -1,26 +1,14 @@
 @value screen_small_min_width from '../../../styles/base/breakpoints.css';
 @value screen_medium_min_width from '../../../styles/base/breakpoints.css';
-
-/*
- * TODO: Attempting to use values or compose styles from colors.css leads to
- * the error:
- *
- * "Order in extracted chunk undefined"
- * 
- * Unfortunately, it's not clear why. So for now, the colors used here are 
- * hardcoded. I need to figure out why this happens!
- *
- * @value sky_blue from '../../../styles/base/colors.css';
- * composes: skyBlue from '../../../sstyles/base/colors.css';
- */
+@value sky_blue from '../../../styles/base/colors.css';
 
 .container {
   padding: 1rem 1rem 2rem 1rem;
 }
 
 .containerHomePageNav {
   composes: container;
-  background: #6090d0 url(./resting_above_treeline.jpg) bottom left no-repeat;
+  background: sky_blue url(./resting_above_treeline.jpg) bottom left no-repeat;
   padding-bottom: 1rem;
 }
 

webpack.config.js

@@ -66,7 +66,9 @@ const config = {
     configFile: './.eslintrc'
   },
   plugins: [
-    new ExtractTextPlugin('[name].css'),
+    new ExtractTextPlugin('[name].css', {
+      ignoreOrder: true
+    }),
     new webpack.ProvidePlugin({
       Promise: 'imports?this=>global!exports?global.Promise!es6-promise',
       fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'