bug: Wrongly generated CSS selector upon build, while dev works fine

[jbeckerdm]

Describe the bug

Hello!

In a React TS + Vite project using CSS modules, I stumbled upon an issue
where all written css selectors are correctly applied to the elements in dev mode,
but in the production build, one selector is missing, and - upon further inspection - the generated CSS
differs slightly.

It happens roughly like this:
The following [here simplified] CSS is what I've written in the CSS module, and is used as-is in dev mode and works fine:

.inputContainer {
	.input { ... }
	
	&:after { ... }

	&:after,
	& .input { ... }
}

However, in production, the last css selector ( &:after, & .input ) is wrongly compiled into the following:

.inputContainer .input, .inputContainer .input {}

The .inputContainer:after selector is removed, and instead it compiles to two times the same selector.

Reproduction

https://stackblitz.com/edit/vitejs-vite-k6n2wy?file=src%2FApp.module.css

Steps to reproduce

I've attached a reproduction url using the stock React+Vite template (skipping TS here, it doesnt matter).
If you run that one in stackblitz as is, both .input and the :after Element will be laid on top of each other, which is correct.

However, if you stop that server in the terminal, run npm run build and then npx serve dist, you will see that they are not on top of another anymore, since the :after Element is missing a css rule, due to the css being wrongly compiled.

System Info

System:
    OS: macOS 14.3.1
    CPU: (11) arm64 Apple M3 Pro
    Memory: 159.33 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.0 - ~/.nvm/versions/node/v21.6.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v21.6.0/bin/npm
    pnpm: 8.14.1 - ~/.nvm/versions/node/v21.6.0/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.184
    Edge: 121.0.2277.112
    Safari: 17.3.1
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.2.1 
    vite: ^5.0.8 => 5.0.12

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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-k6n2wy (Open reproduction)

[sapphi-red]

It seems to be a bug in esbuild (evanw/esbuild#3648).
The easiest way to workaround is to swap the selector:

.inputContainer {
	& .input,
	&:after, { ... }
}

[jbeckerdm]

Thank you for your quick help! I can confirm that the workaround works, and it seems that the bug in esbuild has just been fixed as well 🎉

If there's no further discussion necessary, this issue can be closed.

[sapphi-red]

Note that this won't be included in Vite 5.1.x because Vite 5.1.x uses esbuild 0.19.x and the fix would be included in esbuild 0.20.x.