From 8c3fb922d848738ca15696d39bb9e4fcfd9acb92 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Tue, 29 Jun 2021 14:08:58 +0700
Subject: [PATCH] only check selector that are direct children of `:global`
 (#6435)

* failing test for i6434

* use string match to simplify regexp

* more tests

* separate test suite

* test for commas inside attributes

* stricter regex pattern

* test escaped brackets and parentheses

* change latest test selector to lists

* correct failing test for escaped parentheses

* update with proposed pattern
---
 src/compiler/compile/css/Selector.ts           |  2 +-
 .../css-invalid-global-selector-2/errors.json  | 17 +++++++++++++++++
 .../css-invalid-global-selector-2/input.svelte | 18 ++++++++++++++++++
 .../css-invalid-global-selector-3/errors.json  | 17 +++++++++++++++++
 .../css-invalid-global-selector-3/input.svelte | 12 ++++++++++++
 .../css-invalid-global-selector-4/errors.json  | 17 +++++++++++++++++
 .../css-invalid-global-selector-4/input.svelte |  9 +++++++++
 7 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 test/validator/samples/css-invalid-global-selector-2/errors.json
 create mode 100644 test/validator/samples/css-invalid-global-selector-2/input.svelte
 create mode 100644 test/validator/samples/css-invalid-global-selector-3/errors.json
 create mode 100644 test/validator/samples/css-invalid-global-selector-3/input.svelte
 create mode 100644 test/validator/samples/css-invalid-global-selector-4/errors.json
 create mode 100644 test/validator/samples/css-invalid-global-selector-4/input.svelte

diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index 49ba5e71e5..0eea853b3a 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/src/compiler/compile/css/Selector.ts
@@ -147,7 +147,7 @@ export default class Selector {
 		for (const block of this.blocks) {
 			for (const selector of block.selectors) {
 				if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
-					if (/[^\\],/.test(selector.children[0].value)) {
+					if (/[^\\],(?!([^([]+[^\\]|[^([\\])[)\]])/.test(selector.children[0].value)) {
 						component.error(selector, {
 							code: 'css-invalid-global-selector',
 							message: ':global(...) must contain a single selector'
diff --git a/test/validator/samples/css-invalid-global-selector-2/errors.json b/test/validator/samples/css-invalid-global-selector-2/errors.json
new file mode 100644
index 0000000000..3317925b00
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-2/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "css-invalid-global-selector",
+		"message": ":global(...) must contain a single selector",
+		"start": {
+			"line": 11,
+			"column": 5,
+			"character": 156
+		},
+		"end": {
+			"line": 11,
+			"column": 29,
+			"character": 180
+		},
+		"pos": 156
+	}
+]
diff --git a/test/validator/samples/css-invalid-global-selector-2/input.svelte b/test/validator/samples/css-invalid-global-selector-2/input.svelte
new file mode 100644
index 0000000000..6acbabd7da
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-2/input.svelte
@@ -0,0 +1,18 @@
+<style>
+	div :global(:is(h1, h2)) {
+		color: red;
+	}
+	div :global(:where(h1, h2)) {
+		color: red;
+	}
+	div :global(h1 ~ :is(h2, h3)) {
+		color: red;
+	}
+	div :global(:is(h1, h2), h3) {
+		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-3/errors.json b/test/validator/samples/css-invalid-global-selector-3/errors.json
new file mode 100644
index 0000000000..abc516a504
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-3/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "css-invalid-global-selector",
+		"message": ":global(...) must contain a single selector",
+		"start": {
+			"line": 5,
+			"column": 5,
+			"character": 77
+		},
+		"end": {
+			"line": 5,
+			"column": 44,
+			"character": 116
+		},
+		"pos": 77
+	}
+]
diff --git a/test/validator/samples/css-invalid-global-selector-3/input.svelte b/test/validator/samples/css-invalid-global-selector-3/input.svelte
new file mode 100644
index 0000000000..dca0094a06
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-3/input.svelte
@@ -0,0 +1,12 @@
+<style>
+	div :global(h1[data-title="Hello, world!"]) {
+		color: red;
+	}
+	div :global(h1[attribute], video[autoplay]) {
+		color: red;
+	}
+</style>
+
+<div>
+	<h1>hello world</h1>
+</div>
diff --git a/test/validator/samples/css-invalid-global-selector-4/errors.json b/test/validator/samples/css-invalid-global-selector-4/errors.json
new file mode 100644
index 0000000000..8d76cb63c0
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-4/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "css-invalid-global-selector",
+		"message": ":global(...) must contain a single selector",
+		"start": {
+			"line": 2,
+			"column": 5,
+			"character": 13
+		},
+		"end": {
+			"line": 2,
+			"column": 24,
+			"character": 32
+		},
+		"pos": 13
+	}
+]
diff --git a/test/validator/samples/css-invalid-global-selector-4/input.svelte b/test/validator/samples/css-invalid-global-selector-4/input.svelte
new file mode 100644
index 0000000000..ed33b6b385
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-4/input.svelte
@@ -0,0 +1,9 @@
+<style>
+	div :global(h1, .abc\)) {
+		color: red;
+	}
+</style>
+
+<div>
+	<h1>hello world</h1>
+</div>