Repository: sveltejs/svelte (JavaScript)
Date: 2021-06-23 17:03:46+00:00
Task type: Bug Fix

Issue:
:where breaks :global in 3.38.3
**Describe the bug**
Using multiple selectors in `:where` (https://web.dev/css-is-and-where/) breaks :global in 3.38.3 and not 3.38.2.


**Logs**
```
:global(...) must contain a single selector (2:0)
```

**To Reproduce**
In 3.38.2: https://svelte.dev/repl/564fb17fee1f491c89986252fb04776f?version=3.38.2
In 3.38.3: https://svelte.dev/repl/564fb17fee1f491c89986252fb04776f?version=3.38.3

**Expected behavior**
Should have same behavior as 3.38.2


**Severity**
Kind of high.



Issue discussion:

Solution patch:
diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
--- 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'


Test patch:
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
--- /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
--- /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
--- /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
--- /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
--- /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
--- /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>