-
-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Description
Describe the bug
Since svelte 5.10.1. It's easier to show it then explain it, so see the repro repls below.
That being said; When you have a selector, such as an element or class selector, inside of a :root psuedo-class (think theme switching, :root[data-theme="dark"]), and then have THAT inside of a :global block (think the element you are targeting is inside of a component, svelte (for some reason) does not know what is inside of said component), then the :root psuedo-class is commented out, effecively causing the styles to be applied globally, no matter the theme chosen.
The bug can be mitigated by swapping :root and :global (:root goes around :global and your chosen CSS selector) OR by adding some kind of CSS property inside :root, to acompony the lonely selector.
I suspect #14577 caused this.
TLDR: Svelte incorrectly parses a non-empty selector inside a :root psuedo-class inside of a :global block as empty.
Reproduction
Code no one would ever use working in 5.10.0: https://svelte.dev/playground/c0590290e2d74a56810d5d5aee532ecf?version=5.10.0
The same code not working in 5.10.1: https://svelte.dev/playground/46d756adb072472baa431c6466ab3c8d?version=5.10.1
Mitigation 1 in 5.10.1: https://svelte.dev/playground/cc94df4a068e425995fb31e1746098ac?version=5.10.1
Mitigation 2 in 5.10.1: https://svelte.dev/playground/1a7ef3a365524fcd81837beefbb84820?version=5.10.1
Note: We do NOT expect the text to be styled red in these reproductions of the issue.
Logs
No response
System Info
System:
OS: Windows 11 10.0.26100
CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900HX
Memory: 12.79 GB / 31.75 GB
Binaries:
Node: 22.12.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
pnpm: 9.15.0 - ~\AppData\Local\pnpm\pnpm.CMD
bun: 1.1.38 - ~\.bun\bin\bun.EXE
Browsers:
Edge: Chromium (129.0.2792.79)
Internet Explorer: 11.0.26100.1882Severity
annoyance