From f60cb22a9dc954610e3558e455c3e723e5e8972a Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Thu, 8 Jul 2021 23:24:22 +0800
Subject: [PATCH] standalone :global() with multiple selectors shouldn't be
 treated as error (#6508)

---
 src/compiler/compile/css/Selector.ts            |  9 +++++++++
 .../css-invalid-global-selector-5/errors.json   | 17 +++++++++++++++++
 .../css-invalid-global-selector-5/input.svelte  | 12 ++++++++++++
 .../css-invalid-global-selector-6/errors.json   | 17 +++++++++++++++++
 .../css-invalid-global-selector-6/input.svelte  | 12 ++++++++++++
 .../css-invalid-global-selector/errors.json     | 10 +++++-----
 .../css-invalid-global-selector/input.svelte    |  6 ++++++
 7 files changed, 78 insertions(+), 5 deletions(-)
 create mode 100644 test/validator/samples/css-invalid-global-selector-5/errors.json
 create mode 100644 test/validator/samples/css-invalid-global-selector-5/input.svelte
 create mode 100644 test/validator/samples/css-invalid-global-selector-6/errors.json
 create mode 100644 test/validator/samples/css-invalid-global-selector-6/input.svelte

diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index 8c282e4c35..42e9b1fe6b 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/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') {
diff --git a/test/validator/samples/css-invalid-global-selector-5/errors.json b/test/validator/samples/css-invalid-global-selector-5/errors.json
new file mode 100644
index 0000000000..8129b236e6
--- /dev/null
+++ b/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
+	}
+]
diff --git a/test/validator/samples/css-invalid-global-selector-5/input.svelte b/test/validator/samples/css-invalid-global-selector-5/input.svelte
new file mode 100644
index 0000000000..67d4b9928a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/test/validator/samples/css-invalid-global-selector-6/errors.json b/test/validator/samples/css-invalid-global-selector-6/errors.json
new file mode 100644
index 0000000000..8129b236e6
--- /dev/null
+++ b/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
+	}
+]
diff --git a/test/validator/samples/css-invalid-global-selector-6/input.svelte b/test/validator/samples/css-invalid-global-selector-6/input.svelte
new file mode 100644
index 0000000000..e0b2ffd597
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/test/validator/samples/css-invalid-global-selector/errors.json b/test/validator/samples/css-invalid-global-selector/errors.json
index 2998f09cfa..7b2d5123b0 100644
--- a/test/validator/samples/css-invalid-global-selector/errors.json
+++ b/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
 	}
 ]
diff --git a/test/validator/samples/css-invalid-global-selector/input.svelte b/test/validator/samples/css-invalid-global-selector/input.svelte
index 6f92027612..0ec337edfb 100644
--- a/test/validator/samples/css-invalid-global-selector/input.svelte
+++ b/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;
 	}