style-guard

Style Guard for CSS modules

Use proxies in dev to guard against potentially missing styles for CSS modules.

Inspired from this gist

Automatically guard styles with the babel-plugin-style-guard

Example:

/* styles.css */
.thing {
  color: blue;
}

React component with styles.doesNotExist reference to undefined value.

import React from 'react'
import styleGuard from 'style-guard'
import css from './styles.css'
// css is CSS module object

const styles = styleGuard(css)
// styles is now proxied object in dev to throw if unknown properties are called

export default function NavBar(props) {
  const { auth, handleLogout } = props
  return (
    <div className={styles.thing}>
      <span className={styles.doesNotExist}>
        xyz
      </span>
    </div>
  )
}

/*
  styles.doesNotExist will cause a dev error because its missing or has been removed!
*/

Resulting in an error like so:

This will help prevent style regressions in dev mode