A style to catch "undefined" styles in modern webapps

undefinedWarning.scss

/* In this modern world of webpacking and importing styles into your javascript 
to make use of CSS modules, you sometimes end up asking for a style that just doesn't exist.
Thus, your component ends up with `undefined` in it's class definition.
At best, it's no noticable effect.
At worst, you're missing key styling you thought you had because of a typo in your JS.

This snippet just adds a style to `.undefined`, highlighting them on your screen for ease.
*/


:global(.undefined) { //marked global because you should be using CSSModules
  background-color: #FF7b93;
  border: thick solid red;
  &::before{
    position:fixed;
    top: 10px;
    left: 10px;
    display: block;
    content: 'An undefined style exists on your page!';
    padding: 10px;
    color: white;
    background-color: rgba(0,0,0,0.5);
    border: thin solid red;
    font-size: 2rem;
  }
}