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 */