QwikDev / qwik

Instant-loading web apps, without effort
https://qwik.dev
MIT License
20.85k stars 1.31k forks source link

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

Open brandonpittman opened 1 month ago

brandonpittman commented 1 month ago

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.

image

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