cx .undefined

button.jsx

import cx from 'classnames';
import styles from './button.css';

const Button = ({children}) => (
  <button className={cx({[styles.button]: true})}>{children}</button>
);

// If we didn't define .button inside button.css then the above cx call
// looks like cx({[undefined]: true}) which actually means the class name
// "undefined" is set.
//
// Our global styles can then make this REALLY ugly and obvious so we can
// visually see "oops we forgot to define some expected class names"
//
// Note this only works because we're using cx which will takes objects where
// the keys are converted to strings

global-master-styles.css

.undefined {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background: red !important;
  color: white !important;
  justify-content: center !important;
  align-items: center !important;
  font-size: 30px !important;
  font-weight: bold !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;
}