Merge pull request #97 from netlify/css-modules-undefined

CSS-modules `undefined` overlay

src/index.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
-import Root from './root';
-import registry from './lib/registry';
 import 'file?name=index.html!../example/index.html';
 import 'react-toolbox/lib/commons.scss';
+import Root from './root';
+import registry from './lib/registry';
 import './index.css';
 
+if (process.env.NODE_ENV !== 'production') {
+  require('./utils.css'); // eslint-disable-line
+}
+
 // Create mount element dynamically
 const el = document.createElement('div');
 el.id = 'root';

src/utils.css

@@ -0,0 +1,25 @@
+/* stylelint-disable */
+/* This is an utility file that should not be included in production build */
+:global {
+  & .undefined {
+    position: fixed !important;
+    top: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    background: red !important;
+    color: white !important;
+    font-weight: bold !important;
+    font-size: 30px !important;
+  }
+
+  & .undefined::after {
+    display: block !important;
+    padding: 15px 30px !important;
+    content: 'ERROR! You are missing a class definition in your css module! Inspect me to find out where.' !important;
+  }
+}
+/* stylelint-enable */

webpack.base.js

@@ -1,3 +1,5 @@
+/* eslint global-require: 0 */
+
 const webpack = require('webpack');
 
 module.exports = {
@@ -5,11 +7,11 @@ module.exports = {
     loaders: [
       {
         test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'url-loader?limit=100000'
+        loader: 'url-loader?limit=100000',
       },
       {
         test: /\.json$/,
-        loader: 'json-loader'
+        loader: 'json-loader',
       },
       {
         test: /\.scss$/,
@@ -31,15 +33,21 @@ module.exports = {
             'transform-object-assign',
             'transform-object-rest-spread',
             'lodash',
-            'react-hot-loader/babel'
-          ]
-        }
-      }
-    ]
+            'react-hot-loader/babel',
+          ],
+        },
+      },
+    ],
   },
-
   postcss: [
     require('postcss-import')({ addDependencyTo: webpack }),
-    require('postcss-cssnext')
+    require('postcss-cssnext'),
+  ],
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+      },
+    }),
   ],
 };