The same CSS styles are applied multiple times to an element on the build mode

[dmitry-pokhmelnov]

Environment

• Linaria version: 1.3.3

Description

I have some components loaded dynamically by using dynamic import() and React. lazy. Dynamic loading produces a CSS chunk for each component in the production build mode If I have a test component as a part of other components that loads dynamically, I get CSS chunks for each dynamically loaded component with exactly the same className for my test component

Issues

The same CSS selectors are in different CSS chunks; The same CSS styles are applied at least 2 or more times; It makes impossible to override CSS styles with styled(SomeComponent) because duplicated styles override each other and sometimes have a higher priority.

Styled-components don't have this issue because they generate a unique classNames

Question

Based on my current understanding, this issue might be resolved if we apply chunk name to class name produced by linaria. It will result in generating a unique class name selector for each CSS chunk. Do you think it's possible to apply a chunk name for each CSS selector produced by linaria?

Reproducible Demo

https://github.com/dmitry-pokhmelnov/bug-repro-linaria

[jevangelista-quizlet]

just FYI. I tried the demo with linaria 2.0.0-rc.3 and the behaviour is still there

[DiFuks]

The reason for this problem is that webpack generates a css file for every chunk loaded with lazy-load. But after switching between pages, react does not remove already included css files. This issue is very similar to this one https://stackoverflow.com/questions/66531412/dynamically-load-and-unload-content-of-css-file-in-javascript-react

[gajraj-gan]

Any update on this ? This is happening to me while I am using *.module.scss