compiler sometimes sometimes tries to encapsulate :global(...)

[JasonWoof]

Describe the bug

There's a bug in how some css selectors are compiled, such that the class that the compiler adds (to scope things to the module) is prepended to the contents of :global(...).

Reproduction

:global(div) > div {
	color: red;
}

compiles to:

.svelte-lxuwwediv>div.svelte-lxuwwe{color:red}

This bug is about the extra .svelte-lxuwwe at the beginning that's smashed right up against the first div.

Here's a repl showing this in action: https://svelte.dev/repl/9b67838a3ad04a52b3a21255f84051c2?version=3.38.3

Logs

No response

System Info

System:
    OS: Linux 5.10 Alpine Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 235.31 MB / 7.43 GB
    Container: Yes
    Shell: 1.32.1 - /bin/ash
  Binaries:
    Node: 16.2.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 7.13.0 - /usr/local/bin/npm
  npmPackages:
    rollup: ^2.3.4 => 2.49.0
    svelte: ^3.0.0 => 3.38.2

Severity

annoyance

[Conduitry]

https://svelte.dev/repl/9b67838a3ad04a52b3a21255f84051c2?version=3.40.2 Hm. In 3.40.2, correct-looking CSS is getting generated, but the scoping class is only getting added to the outer div in the DOM and not the inner one, so the text still isn't red.

@tanhauhau Do you think there's anything that can reasonably be done about this? I don't think we want the compiler to be looking inside the :global(...) and seeing which elements within the current component that might match, but I'm not sure how else we'd get both divs to have scoping classes added to them. I'm wondering whether the remainder of this issue should be a won't-fix.

[JasonWoof]

This is the fix I was looking for! I just wanted get rid of that corruption at the beginning of the css output.

I only put the outer div in the same component to make a simpler test case, I don't need that test case to work, I think the point of :global() is to span between different components.

It seems like it would be tricky to decide if you want to make stuff inside :global() match stuff in the current component, and possibly tricky to implement. I suggest having that discussion/fix in a different issue (if it needs to happen at all) so it's easier to find/link/etc.

[tanhauhau]

my bad, didn't noticed that, fixing it in #6563

[Conduitry]

The rest of this should be fixed in 3.40.3 now - https://svelte.dev/repl/9b67838a3ad04a52b3a21255f84051c2?version=3.40.3