CSS Modules - composed styles are duplicated

Describe the bug

Importing a css module that’s been composed ends up duplicating styles.

In the reproduction linked below, our App.tsx has 2 div elements with texts that have different styles. The styles are under the styles folder. The first text is styled using originalText style from original.module.css, and should have a 32px font size. The second one should have a 14px font size, since it’s styled using smallText from small.module.css, which composes originalText and then overrides the font size. However, it doesn’t work as expected.

The originalText style from original.module.css is imported first, then smallText style is imported, then the originalText style is imported once again, overriding the font size provided by smallText.

You can see this in action if you inspect the div element in dev tools and check out the styles applied.

Reproduction

https://codesandbox.io/s/vite-react-ts-forked-dy91of?file=/src/App.tsx

System Info

System:
    OS: macOS 12.2.1
    CPU: (8) arm64 Apple M1
    Memory: 127.45 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - /usr/local/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.1.2 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 99.1.36.117
    Chrome: 99.0.4844.83
    Firefox: 97.0.1
    Safari: 15.3
  npmPackages:
    @vitejs/plugin-react: ^1.2.0 => 1.2.0 
    vite: ^2.8.6 => 2.8.6

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 https://github.com/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.

[sapphi-red]

I think this problem cannot be solved with Vite due to the architecture. Vite processes each css import individually.

• original.module.css will include .originalText
• small.module.css will include .originalText and .smallText

To dedupe .originalText, it will need to process all css files at once because it needs to know depency graph.

One way it may solve this is to rewrite composes into a import with JS. But I feel this is no longer “CSSModules”.

[desmond-tuiyot]

I’m not particularly familiar with CSS Modules, but it works fine when you change their import order.

import originalStyles from './styles/original.module.css';
import smallStyles from './styles/small.module.css'; // import later for higher priority

In this small example it does have a workaround. But when I’m composing classes across many different css modules in my actual project, I have no way of controlling the import order myself. That’s entirely in vite territory.