CSS Modules lets you access a styles
object, to access a localised class name.
The problem is styles['this-style-does-not-exist']
will silently return undefined
. Often you only refer to a non-existent style if you have written a typo, or forgotten to update another file, after removing a style.
[strict-css-modules-loader] wraps your styles
object in a proxy to warn you when accessing non-existent styles.
var x = styles["this-does-not-exist"];
// error: [strict-css-modules-loader] The CSS class "this-does-not-exist" does not exist in /path/my-css.css!
console.log(x);
// log: `undefined`
npm install --save-dev @teamthread/strict-css-modules-loader
or
yarn add -D @teamthread/strict-css-modules-loader
[strict-css-modules-loader] requires at least Node v4.
Add this line to your webpack config, where you set up your CSS modules:
const webpackConfig = {
module: {
rules: [
{
test: /\.css$/,
use: [
+ { loader: "@teamthread/strict-css-modules-loader" },
{ loader: "style-loader" },
{ loader: "css-loader", options: { modules: true } }
]
}
]
}
};
and you're done! You should now see console errors if you use non-existent styles.
If building in production-mode, then this loader does absolutely nothing, and should not affect your bundle size at all.
Contributors are welcome! 😊
Please check out the CONTRIBUTING.md.