Compound :global selector allows invalid CSS

[geoffrich]

Describe the bug
Using the compound :global selector (e.g. p:global(.x)) allows invalid CSS. For example, the following compiles without any warnings or errors:

<style>	
	.x:global(p) {
		color: red;
		/* compiles to .x.svelte-hashp{color:red} */
	}
	
	.foo:global(*) {
		/* compiles to .foo.svelte-hash*{color:red} */
	}
</style>

Note how the tag name or wildcard is appended to the end of the hash.

The non-global versions of these selectors don't make sense (.xp and .foo* ). Per the CSS spec, type or universal selectors must come first in a compound selector, so they shouldn't be allowed inside :global when used in a compound selector.

Before it was supported, using :global in a compound selector threw an error. I think it would make sense to throw an error in this case as well.

Logs
n/a

To Reproduce
See this REPL.

The compiled CSS is invalid and no warnings or errors are thrown.

Expected behavior
Svelte should either warn or error during the compilation process, e.g. ":global(...) must not contain type or universal selectors when used in a compound selector".

Stacktraces
n/a

Information about your Svelte project:

• Your browser and the version: Firefox 88

• Your operating system: Windows 10

• Svelte version (Please check you can reproduce the issue with the latest release!): 3.38.0

• Whether your project uses Webpack or Rollup: Rollup

Severity
Not very severe, but unexpected.

Additional context
n/a

[roychoo]

hi, was trying to fix #6306, and discovered this issue. and since i am on it, make another PR on this too. (#6322)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Conduitry]

This is disallowed now in 3.56.0 - https://svelte.dev/repl/dbadcb85a5ae42e3b963784432ab0c0f?version=3.56.0