Style Guard is a small DX package family for catching missing CSS Module class references during development.

The runtime package wraps CSS Module objects with a proxy, while the Babel plugin can apply that guard automatically in development builds.

Why it matters

CSS Module regressions are easy to miss when a class name is removed or renamed. Style Guard turns those mistakes into immediate development errors instead of quiet UI breakage.

Full documentation, synced from the package README:

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

Links

• Runtime package
• Babel plugin
• Runtime source