[fix] improper :global() style encapsulation (#6560)

Author: tanhauhau

src/compiler/compile/css/Selector.ts

@@ -278,14 +278,12 @@ function block_might_apply_to_node(block: Block, node: Element): BlockAppliesToN
 			return BlockAppliesToNode.NotPossible;
 		}
 
-		if (selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector') {
-			continue;
+		if (block.selectors.length === 1 && selector.type === 'PseudoClassSelector' && name === 'global') {
+			return BlockAppliesToNode.NotPossible;
 		}
 
-		if (selector.type === 'PseudoClassSelector' && name === 'global') {
-			// TODO shouldn't see this here... maybe we should enforce that :global(...)
-			// cannot be sandwiched between non-global selectors?
-			return BlockAppliesToNode.NotPossible;
+		if (selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector') {
+			continue;
 		}
 
 		if (selector.type === 'ClassSelector') {

test/css/samples/global-with-child-combinator/_config.js

@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};

test/css/samples/global-with-child-combinator/expected.css

@@ -0,0 +1 @@
+div>div.svelte-xyz{color:red}

test/css/samples/global-with-child-combinator/input.svelte

@@ -0,0 +1,9 @@
+<style>
+	:global(div) > div {
+		color: red;
+	}
+</style>
+
+<div>
+	<div />
+</div>