@teamthread/strict-css-modules-loader

0.0.3 • Public • Published

∉ 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

Package Sidebar

Install

npm i @teamthread/strict-css-modules-loader

Weekly Downloads

2

Version

0.0.3

License

MIT

Unpacked Size

5.5 kB

Total Files

5

Last publish

Collaborators

  • danpalmer
  • jackfranklin
  • paulspringett
  • stephencookdev