0.1.1 • Published 3 years ago
babel-plugin-style-guard v0.1.1
Style Guard Babel Plugin
Use proxies in dev to guard against potentially missing styles for CSS modules.
Install
npm install babel-plugin-style-guard -D
To use, add to your babel config
{
plugins: [
'babel-plugin-style-guard',
],
}
After adding to babel config, all CSS modules will be automatically wrapped with style guard in DEV mode.
Example
In:
import React from 'react'
import styles from './styles.css'
export default function NavBar(props) {
const { auth, handleLogout } = props
return (
<div className={styles.thing}>
<span className={styles.doesNotExist}>
xyz
</span>
</div>
)
}
Out:
import React from 'react'
import __styles from './styles.css'
import styleGuard from 'style-guard'
// Automatically gaurd styles in dev mode
const styles = styleGuard(__styles)
// 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!
*/
Now unknown class names will throw errors in dev mode.
Resulting in an error like so:
This will help prevent style regressions in dev mode