CSS pseudo selector + nested CSS media query break in build mode

[echocrow]

Describe the bug

Media queries nested inside a pseudo selector seem to work as-expected in dev, but break in build mode.

Contrived example:

<div></div>

<style>
div::after {
  content: 'red pls';
  @media screen {
    background: red;
  }
}
</style>

I'd expect the ::after pseudo element to have a red background when viewed on the web.

While in dev mode, this works as expected. But vite build produces this output:

div.svelte-19hj1kk:after {
    content: "red pls';"
}

@media screen {
    {
        background: red
    }
}

Expected output instead is:

div.svelte-19hj1kk:after {
    content: "red pls';"
}

@media screen {
    div.svelte-19hj1kk:after {
        background: red
    }
}

Not sure if this is a bug with Svelte, or in the Vite bundling chain(?)

The fact that this works in dev is a tad concerning; as this leaves a false impression working code, which then breaks silently during build & in prod. We only started noticing it once another processor started complaining about invalid CSS.

I tried a rollback, but seems like this was also a bug in Svelte 4. (I had not tried Svelte 3 or earlier.)

Reproduction

Stackblitz Repro (starts build && preview)

Logs

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    svelte: 5.28.2 => 5.28.2

Severity

annoyance

[7nik]

I got the same problem in a fresh vite vanilla js project. So it's vite's bug, or even esbuild's, like a similar one vitejs/vite#18974 (has a workaround in the end).

[echocrow]

ah, I should have know better to dig deeper - thanks for the reference!

tried the suggestion in our actual repo. unfortunately that does not fix our actual issue. turns out, there seems to be a similar bug in lightningcss too: Lightning CSS repro

closing this as this is not an issue with Svetle 👋

[7nik]

The thing is :is() cannot contain pseudo-elements

[echocrow]

The thing is :is() cannot contain pseudo-elements

Ha! I just now learned that too while digging through Lightning CSS issues: parcel-bundler/lightningcss#937 (comment)

the odd thing is, we're not authoring the :is() selector; our source code looks like this:

.foo::after,
.bar::after {
  @media (width >= 123px) {
    color: whatever;
  }
}

we discovered the issue while migrating to Tailwind v4, which makes use of Lightning CSS. Tailwind seems to run Lightning CSS twice, and Lighting CSS appears to be wrapping the two selectors with :is() on the first pass.

So the above example gets transformed into…

@media (min-width: 123px) {
  :is(.foo:after, .bar:after) {
    color: whatever;
  }
}

…and after a second pass of Lightning CSS that becomes…

@media (min-width: 123px) {
  :is() {
    color: whatever;
  }
}

Initially I thought only the final output was incorrect. But given that pseudo selectors are not allowed inside of :is(), it seems the first pass is already a breaking transformation.

Lightning CSS REPL

(update: new issue opened)