Svelte 5: In CSS, mixing :global() and various selectors throws an error

[pimdewit]

Describe the bug

Some CSS selectors throw an error when mixed with :global().
This seems to only happen svelte 5, not the earlier versions.
From my experimentation I am relatively sure it happens when adding selectors with ( and ), e.g :where(), :has(), :is(), etc

Reproduction

:global(:where(selector))

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAEyWNywqDMBBFfyXMSiEi3aZS6HdUF1FHGzp5kIwWEf-9Cd1c7gPOPWExhAnU6wSnLYKCZwgggY9QQtqRGHNOfotTabrZ7I-uLdq73nWJD8JiWa3kR02V-r4xYhWk8CTFRnUtzrL3bHVcjWtG8tOnSawjK3FDey_rlVntH5bvrJ_NYnAGxXHDa7h-2NTG_6kAAAA=

:global(:not([attribute]))

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAEyVNywqDMBD8FdmTQlPpNZVCv0M9RLPq0rxIVqmI_15DL8O8mDlgIoMJZHuAUxZBwjsEuAHvIYu0oWG8dPJrHLPTaNpeTZ2xc51rEu8GM-V7pHERjF8u5Gz8oEwpneeyVZGUWEhrdH1VFUcud2xVnMmJwfjxIxKryLJ4oH3m9LyG6__y9W29polQg-S44tmfPzzfVnS2AAAA

:global(:is(.class)

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAEyWOwQrCMBBEfyXsqYLoPVZB_IR6Mx7aZmsXtknJbgul9N9t9DiPecOs0BGjgH2tEOoBwcJ9HOEIuow5yIysuGeJU2ozKT3NpuVa5OpAUdTBzQWnz57EPKrKSB8n9qZBQ2GumbwL5XmXciuUogvjT7Afjk3NhSUpTnnoYNbMnbaRY7Imob9ksOWBv7cfGaKnjtCD1TTh9t6-jKj2HMMAAAA=
^ This demo should be invalid, but does not throw an error

Logs

No response

System Info

System:
    OS: macOS 14.2
    CPU: (8) arm64 Apple M2
    Memory: 59.17 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 119.0.6045.123
    Chrome Canary: 121.0.6123.0
    Edge: 118.0.2088.69
    Firefox Nightly: 120.0a1
    Safari: 17.2
    Safari Technology Preview: 17.4
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.1

Severity

annoyance

[jasperkelder]

I just experienced the same problem, for now this workaround seems to be useable:

<a href="#">Test</a>

<style>
	/* Used to work but now doesn't */
	/* :global(a):hover {
		color: green;
	} */

	/* Still works */
	:global(a:hover) {
		color: green;
	}
</style>

Edit: There also seems to be something funky going on in the Svelte 5 repl. When :global() is used the style remains applied even after removing it from the code. This doesn't happen in the Svelte 4 repl.

[NickStemerdink]

Same for a selector like this:

:global(> *:nth-child(1)) {
}

Error:
CompileError: Error while preprocessing **/src/lib/layout/Main.svelte - Expected a valid CSS identifier

[NickClark]

Same error: Internal server error: /Users/.../+page.svelte:107:10 Expected a valid CSS identifier

[johannesmutter]

CSS nth-child selector larger than 9 don't work e.g. :nth-child(10n) will throw this error:
CompileError: Expected a valid CSS identifier

Svelte 5 REPL to reproduce

[brunnerh]

@johannesmutter There already is a separate issue for that here:

• Svelte 5: :nth-of-type(10) and :nth-of-type(10n[+1]) (> 1 digit) do not compile #9969