CSS pseudo selector with nested media query produces wrong styles in production mode

[7nik]

Describe the bug

The following styles

div#app::after {
  content: "after";
  @media screen {
    background: red;
  }
}

in production mode gets compiled into

div#app:after{content:"after"}@media screen{{background:red}}

where the media query block loses the selector.

In dev mode the styles output is correct.

Reproduction

https://github.com/7nik/vite-css-media-nested-in-pseudoelem

Steps to reproduce

npm install npm run dev — open http://localhost:5173/, the text background should be red npm run build & npm run preview — open http://localhost:4173/, the text background should be red, but isn't

System Info

System:
    OS: Linux 6.6 Manjaro Linux
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700K
    Memory: 22.04 GB / 31.09 GB
    Container: Yes
    Shell: 5.2.37 - /bin/bash
  Binaries:
    Node: 23.9.0 - /usr/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 11.3.0 - /usr/bin/npm
    pnpm: 10.9.0 - /usr/bin/pnpm
  Browsers:
    Brave Browser: 134.1.76.81
    Chromium: 136.0.7103.59
  npmPackages:
    vite: ^6.3.1 => 6.3.5

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.

[sapphi-red]

This seems to be a bug in esbuild (esbuild try, https://github.com/evanw/esbuild/issues/4164).

It seems css.transformer: 'lightningcss' works as a workaround.