Skip to content

Selectors inside of :root inside of :global are ignored. #14675

@Jazza-231

Description

@Jazza-231

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.1882

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions