Literally You
Literally You

Reputation: 65

Remove css module object from js

I have webpack (v5) typescript(v4) react(v17) project which uses css modules. When I bundle it with -production flag i have output with:

23254:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i={backOrdersCaution:"b_F-d b_G-d",cartForm:"b_H-d"}}

I see that this is dictionary for javascript to translate project class name to css module class name. But why it does not compile directly into className jsx property? Something like:

<Component className="b_F-d b_G-d"/>

Instead of

<Component className="modules[23254].backOrdersCaution/>

And just remove dictionary object from js. It would reduce js bundle size and increase performance...

Is there any decision to do this?

Upvotes: 1

Views: 560

Answers (2)

Literally You
Literally You

Reputation: 65

It is not possible. Every similar styling solution does not care about that. There are other libraries like https://github.com/vercel/styled-jsx which use a fundamentally different approach.

Keep in mind that nothing will be more performant than global styles yet.

In the future, Next.js may provide something that resolves all styling problems with its own compiler.

Upvotes: 0

d-saurabh
d-saurabh

Reputation: 246

you can modify it to your regular classname by a bit change in webpack config:

modules: {
    localIdentName: '[local]'
},

By default it will be 'hash' for production env.

You can check details https://github.com/webpack-contrib/css-loader#modules

Upvotes: 0

Related Questions