[🐞] Production builds un-nest @starting-style declarations but don't bring scoped style class along for the ride

[brandonpittman]

Which component is affected?

Qwik Rollup / Vite plugin

Describe the bug

If you use @starting-style in scoped CSS like so:

.line {
  fill: none;
  marker-start: url("#dot-small");
  marker-mid: url("#dot-small");
  marker-end: url("#dot-large");
  stroke: var(--color-success);
  stroke-width: 2px;
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s ease-out;

  @starting-style {
    stroke-dashoffset: 200;
  }
}

…when the production build happens it does this:

.line {
  fill: none;
  marker-start: url("#dot-small");
  marker-mid: url("#dot-small");
  marker-end: url("#dot-large");
  stroke: var(--color-success);
  stroke-width: 2px;
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s ease-out;
}

@starting-style {
  .line {
    stroke-dashoffset: 200;
  }
}

Which is another way of writing the same thing. But! It doesn't append the scoped CSS class to the .line selector.

Reproduction

https://stackblitz.com/edit/github-cv95eb-7l9fik?file=src%2Froutes%2Fscoped.css

Steps to reproduce

1. Run pnpm dev and see the button fades in.
2. Run pnpm preview, see the button doesn't fade in, and inspect the CSS (for .foo in the Stackblitz).

System Info

System:
    OS: macOS 15.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 207.97 MB / 16.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 18.20.4 - ~/Library/pnpm/node
    Yarn: 1.22.19 - ~/Library/pnpm/yarn
    npm: 10.9.0 - ~/Library/pnpm/npm
    pnpm: 9.4.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 130.0.6723.59
    Safari: 18.1
    Safari Technology Preview: 18.0
  npmPackages:
    @builder.io/qwik: 1.8.0 => 1.8.0
    @builder.io/qwik-city: 1.8.0 => 1.8.0