disallow multiple selectors inside :global() (#6428)

sveltejs · Jun 22, 2021 · bbcc1e7 · bbcc1e7
1 parent cba92ad
commit bbcc1e7
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 0 deletions.
diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
@@ -143,6 +143,19 @@ 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)) {
+						component.error(selector, {
+							code: 'css-invalid-global-selector',
+							message: ':global(...) must contain a single selector'
+						});
+					}
+				}
+			}
+		}
 	}
 
 	get_amount_class_specificity_increased() {

diff --git a/test/validator/samples/css-invalid-global-selector/errors.json b/test/validator/samples/css-invalid-global-selector/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "css-invalid-global-selector",
+		"message": ":global(...) must contain a single selector",
+		"start": {
+			"line": 5,
+			"column": 5,
+			"character": 58
+		},
+		"end": {
+			"line": 5,
+			"column": 24,
+			"character": 77
+		},
+		"pos": 58
+	}
+]
diff --git a/test/validator/samples/css-invalid-global-selector/input.svelte b/test/validator/samples/css-invalid-global-selector/input.svelte
@@ -0,0 +1,12 @@
+<style>
+	div :global(.h1\,h2\,h3) {
+		color: red;
+	}
+	div :global(h1, h2, h3) {
+		color: red;
+	}
+</style>
+
+<div>
+	<h1>hello world</h1>
+</div>