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

[privatenumber]

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., #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

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• 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.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

Tasks

Beta Give feedback

No tasks being tracked yet.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-vf7fy6 (Open reproduction)

[privatenumber]

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.