Open brandonpittman opened 1 month ago
Qwik Rollup / Vite plugin
If you use @starting-style in scoped CSS like so:
@starting-style
.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.
.line
https://stackblitz.com/edit/github-cv95eb-7l9fik?file=src%2Froutes%2Fscoped.css
pnpm dev
pnpm preview
.foo
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
Which component is affected?
Qwik Rollup / Vite plugin
Describe the bug
If you use
@starting-style
in scoped CSS like so:…when the production build happens it does this:
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
pnpm dev
and see the button fades in.pnpm preview
, see the button doesn't fade in, and inspect the CSS (for.foo
in the Stackblitz).System Info