standalone :global() with multiple selectors shouldn't be treated as error (#6508)

src/compiler/compile/css/Selector.ts

@@ -142,6 +142,15 @@ export default class Selector {
 			}
 		}
 
+		this.validate_global_with_multiple_selectors(component);
+	}
+
+	validate_global_with_multiple_selectors(component: Component) {
+		if (this.blocks.length === 1 && this.blocks[0].selectors.length === 1) {
+			// standalone :global() with multiple selectors is OK
+			return;
+		}
+
 		for (const block of this.blocks) {
 			for (const selector of block.selectors) {
 				if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {

test/validator/samples/css-invalid-global-selector-5/errors.json

@@ -0,0 +1,17 @@
+[
+	{
+		"code": "css-invalid-global-selector",
+		"message": ":global(...) must contain a single selector",
+		"start": {
+			"line": 5,
+			"column": 1,
+			"character": 54
+		},
+		"end": {
+			"line": 5,
+			"column": 20,
+			"character": 73
+		},
+		"pos": 54
+	}
+]

test/validator/samples/css-invalid-global-selector-5/input.svelte

@@ -0,0 +1,12 @@
+<style>
+	:global(h1, h2, h3), div {
+		color: red;
+	}
+	:global(h1, h2, h3) div {
+		color: red;
+	}
+</style>
+
+<div>
+	<h1>hello world</h1>
+</div>

test/validator/samples/css-invalid-global-selector-6/errors.json

@@ -0,0 +1,17 @@
+[
+	{
+		"code": "css-invalid-global-selector",
+		"message": ":global(...) must contain a single selector",
+		"start": {
+			"line": 5,
+			"column": 1,
+			"character": 54
+		},
+		"end": {
+			"line": 5,
+			"column": 20,
+			"character": 73
+		},
+		"pos": 54
+	}
+]

test/validator/samples/css-invalid-global-selector-6/input.svelte

@@ -0,0 +1,12 @@
+<style>
+	:global(.h1\,h2\,h3).foo {
+		color: red;
+	}
+	:global(h1, h2, h3).foo {
+		color: red;
+	}
+</style>
+
+<div>
+	<h1>hello world</h1>
+</div>

test/validator/samples/css-invalid-global-selector/errors.json

@@ -3,15 +3,15 @@
 		"code": "css-invalid-global-selector",
 		"message": ":global(...) must contain a single selector",
 		"start": {
-			"line": 5,
+			"line": 11,
 			"column": 5,
-			"character": 58
+			"character": 143
 		},
 		"end": {
-			"line": 5,
+			"line": 11,
 			"column": 24,
-			"character": 77
+			"character": 162
 		},
-		"pos": 58
+		"pos": 143
 	}
 ]

test/validator/samples/css-invalid-global-selector/input.svelte

@@ -2,6 +2,12 @@
 	div :global(.h1\,h2\,h3) {
 		color: red;
 	}
+	:global(h1, h2, h3) {
+		color: red;
+	}
+	div, :global(h1, h2, h3) {
+		color: red;
+	}
 	div :global(h1, h2, h3) {
 		color: red;
 	}