0.1.1 • Published 3 years ago
style-guard v0.1.1
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