Remove class objects generated by css-loader when using css-modules

Currently when the modules: true option is defined in css-loader configuration, a json object is added to js output for each css file. E.g

input

// style.css

.has-spinner {

}

output

// style.css (in js bundle)
{
  hasSpinner: 'someHashedCssModuleClass',
}

and then, in my case, it will be referenced by some React component:

// someComponent.js
<SomeComponent className={styles.hasSpinner}

I’m wondering if there is any loader/plugin that is capable of inlining the generated css properties and removing the json object like so:

// style.css
.someHashedCssModuleClass {

}
// someComponent.js
<SomeComponent className="someHashedCssModuleClass"

So that bundle size can be reduced.

4 thoughts on “Remove class objects generated by css-loader when using css-modules”

  1. If you care about performance with .css files you should use MiniCssExtractPlugin. This plugin will extract the .css from your .js bundles and push it to generated .css. And yeah, it’ll also minify the content. .css files are consumed faster in the browser. This plugin is a good performance boost.

    Reply

Leave a Comment