Skip to content
Wrap your CSS Modules objects in a proxy object, to warn if you attempt to access a non-existent style-name
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
CONTRIBUTING.md
LICENCE
README.md
index.js
package.json

README.md

∉ strict-css-modules-loader

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`

Install

npm install --save-dev @teamthread/strict-css-modules-loader

or

yarn add -D @teamthread/strict-css-modules-loader

Requirements

[strict-css-modules-loader] requires at least Node v4.

Usage

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.

Production

If building in production-mode, then this loader does absolutely nothing, and should not affect your bundle size at all.

Contributing

Contributors are welcome! 😊

Please check out the CONTRIBUTING.md.

License

MIT

You can’t perform that action at this time.