CSS Modules duplicates `composes` dependencies onto page, re-declaring classes

privatenumber commented 9 months ago

Describe the bug

I'm facing a problem with the composes feature in CSS Modules using LightningCSS. It seems to duplicate the base class it's composing, causing a re-declaration. Consequently, this re-declaration overwrites styles from components loaded earlier that also composes the same base class, dominating in specificity and altering their intended look.

Disabling LightningCSS resolves the issue, but there are other problems with PostCSS (e.g., https://github.com/vitejs/vite/issues/10079).

Reproduction

https://stackblitz.com/edit/vitejs-vite-vf7fy6?file=vite.config.js

Steps to reproduce

Just load the StackBlitz.

For context, I'm encountering this problem in a Vue.js app. But the reproduction minimizes it down to just JS + CSS Modules.

System Info

N/A

Used Package Manager

npm

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.
```
### Tasks
```

stackblitz[bot] commented 9 months ago

Start a new pull request in StackBlitz Codeflow.

vitejs-vite-vf7fy6 (Open reproduction)

privatenumber commented 9 months ago

I actually managed to reproduce this with PostCSS too: https://stackblitz.com/edit/vitejs-vite-vhmmza?file=comp-a%2Findex.js

In both cases, it seems like anything CSSModules imports is handled outside of Vite and so shared dependencies are duplicated, creating unpredictable behavior based on what gets loaded on the page first.

vitejs / vite