4

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.

ryanVincent
  • 1,033
  • 1
  • 9
  • 14
  • 1
    This is its advantage. Random hashes are produced every time you compile to avoid style conflicts. – weiliang Jan 30 '21 at 05:42
  • @weiliang yeah I get that, but wouldn't it be better to modify the class name both inline and in the stylesheet to avoid having large json objects clogging up the js bundles? – ryanVincent Feb 12 '21 at 10:31
  • 1
    how about https://webpack.js.org/plugins/mini-css-extract-plugin/? If you care about performance you should be using this plugin for your css – Raz Ronen Feb 13 '21 at 19:44
  • @RazRonen yes I'm using css-extract-plugin to extract the css into seperate files but you are still left with these json objects when using css modules – ryanVincent Feb 18 '21 at 16:09

0 Answers0