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

CSS-modules `undefined` overlay
This commit is contained in:
Andrey Okonetchnikov
2016-10-11 10:32:00 +02:00
committed by GitHub
3 changed files with 48 additions and 11 deletions

View File

@ -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';

25
src/utils.css Normal file
View File

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