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

@@ -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/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
+	}
+]

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>

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
+	}
+]

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>

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
+	}
+]

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>