:not(...) styles are broken

[Rich-Harris]

REPL. The encapsulator should treat :not(selector) as *:not(selector), but it doesn't.

[thollander]

I don't think it is a svelte bug.
This is the normal behaviour in CSS.
See this codepen : https://codepen.io/thollander/pen/JzJQKO?editors=1100

The color is inherited by default.
https://www.w3schools.com/cssref/pr_text_color.asp
So it takes the color of the body property which validates the rule :not(p)
However, in the example, you can see border hasn't the same behaviour.

[Rich-Harris]

Updated REPL that shows the bug better: https://svelte.dev/repl/3c70b1effcf4442a8280b1c5db8c6f10?version=3.6.2

:not(xxx) should be converted to .svelte-xyz123:not(xxx)

[Rich-Harris]

Fixed in 3.6.3

[rob-balfre]

@Rich-Harris I'm guessing this change is what is caused my :root css variables to stop working in Svelte 3.6.3+?

https://svelte.dev/repl/9a0c0ca1518346c9aa117d6f6b905fc9?version=3.6.2 (working)
https://svelte.dev/repl/9a0c0ca1518346c9aa117d6f6b905fc9?version=3.6.3 (not working)

Changing :root to :global(body) is my current work around, just checking this is the desired outcome for this change?
https://svelte.dev/repl/9b6f314ecb0145b1b63451435c489402?version=3.6.3 (work around)

[davemo]

@rob-balfre I can confirm this is broken as I was also using :root selectors for variables, good to see there's a workaround but I suspect the fix should be to avoid prefixing the :root pseudo-selector -- I have a PR coming with a fix.