Svelte 5: Cannot use :global() with CSS nesting

[Pronian]

Describe the bug

A compiler error is thrown when using a nested CSS selector with :global(). The nested version of div :global(.b) throws an error, whereas the non-nested version doesn't throw an error.

Reproduction

REPL link

Steps:

1. Create a component with the following source code:

<div>
	<div class="a">Normal nesting works</div>
	<div class="b">Nesting with :global doesn't work</div>
	<div class="c">Non-nested selector with :global works</div>
</div>

<style>
	div {
		font-family: monospace;

		.a {
			color: blue;
		}

		:global(.b) {
			color: red;
		}
	}

	div :global(.c) {
		color: green;
	} 
</style>

2. Attempt to compile the component and observe the error
3. Optionally remove/comment the :global(.b) selector to confirm that it's causing the issue

Logs

TypeError: e.selectors is not iterable
    at eval ([email protected]:1:503253)

System Info

Svelte 5 Version: Next.60 Happens an all OS-es and in the REPL

Severity

annoyance

[svelte-kit-so-good]

It works with the & rule

-                 :global(.b) {
+               & :global(.b) {
			color: red;
		}

[Pronian]

@svelte-kit-so-good Good point, I think it would be good to support this without the & as well.

Selectors like div :is(.b) work with nesting and without the &. It's the same syntax.

[Pronian]

I just tested this with the new :global { } feature in v5.0.0-next.111 and unfortunately this issue is still not fixed.

The original issue still generates the same error message and replacing :global() with the new :global { } syntax also produces the same error message.

:global { } syntax version

<div>
	<div class="a">Normal nesting works</div>
	<div class="b">Nesting with :global doesn't work</div>
	<div class="c">Non-nested selector with :global works</div>
</div>

<style>
	div {
		font-family: monospace;

		.a {
			color: blue;
		}

		:global {
			.b {
				color: red;
			}
		}
	}

	div :global {
		.c {
			color: green;
		}
	} 
</style>

REPL

[johannesmutter]

Can confirm. Also weirdly the global { } selector issue not happening in the Svelte 5 REPL but only in a freshly installed sveltekit project in dev mode (?)

:global(...) can be at the start or end of a selector sequence, but not in the middle

    "@sveltejs/vite-plugin-svelte": "^3.1.0",
    "svelte": "5.0.0-next.112",
    "svelte-preprocess": "^5.1.4",
    "vite": "^5.2.10",
    "@sveltejs/kit": "^2.5.7",

[Pronian]

Can confirm. Also weirdly the global { } selector issue not happening in the Svelte 5 REPL but only in a freshly installed sveltekit project in dev mode (?)

:global(...) can be at the start or end of a selector sequence, but not in the middle

    "@sveltejs/vite-plugin-svelte": "^3.1.0",
    "svelte": "5.0.0-next.112",
    "svelte-preprocess": "^5.1.4",
    "vite": "^5.2.10",
    "@sveltejs/kit": "^2.5.7",

In your example it still happens if you use nesting for the .my-div selector as well: REPL