Describe the bug

Hi,

When you have a nested @starting-style inside a pseudo-element selector, it works in development but doesn't work after the build, the CSS build output is wrong.

Here is an example:

<script>
  let element;
</script>

<button onclick={() => element.showModal()}>open</button>

<dialog bind:this={element}>
  test
</dialog>

<style>
  dialog {
    margin: auto;
  }

  dialog::backdrop {
    background: #2E368C7F;
    transition: opacity 1s ease-in;

    @starting-style {
      opacity: 0;
    }
  }
</style>

Here is the CSS output (after build):

dialog.svelte-32c170{margin:auto}dialog.svelte-32c170::backdrop{background:#2e368c7f;transition:opacity 1s ease-in}@starting-style{{opacity:0}}

Formated output:

dialog.svelte-32c170 {
  margin: auto
}

dialog.svelte-32c170::backdrop {
  background: #2e368c7f;
  transition: opacity 1s ease-in
}

@starting-style {
    {
    opacity: 0
  }
}

The @starting-style get's placed outside the original selector. If the objective is to place it outside, it needs to have the pseudo-element selector inside it.

Placing the @starting-style inside a selector isn't invalid syntax: https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style#syntax

It doesn't have to be ::backdrop; it happens with any pseudo-element selector (e.g. ::after, ::before) based on my tests.

I'm not sure whether it's a Svelte bug or if some tool used during the build process is treating the CSS incorrectly.

Thank you!

Reproduction

<script>
  let element;
</script>

<button onclick={() => element.showModal()}>open</button>

<dialog bind:this={element}>
  test
</dialog>

<style>
  dialog {
    margin: auto;
  }

  dialog::backdrop {
    background: #2E368C7F;
    transition: opacity 1s ease-in;

    @starting-style {
      opacity: 0;
    }
  }
</style>

Test in dev, it works, test in build, it doesn't work.

Logs

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700K
    Memory: 17.72 GB / 31.70 GB
  Binaries:
    Node: 24.6.0 - ~\scoop\apps\nvm\current\nodejs\nodejs\node.EXE
    npm: 11.5.1 - ~\scoop\apps\nvm\current\nodejs\nodejs\npm.CMD
    pnpm: 10.15.1 - ~\scoop\shims\pnpm.EXE
    bun: 1.2.21 - ~\scoop\shims\bun.EXE
  Browsers:
    Edge: Chromium (140.0.3485.54)
  npmPackages:
    svelte: ^5.0.0 => 5.38.8

Severity

annoyance