Remove css module object from js

Question

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?

Answer 1

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.