fix: :global(...):some-pseudoclass should be considered global (#6317)

sveltejs · Jun 22, 2021 · 228832c · 228832c
1 parent 3c889da
commit 228832c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
@@ -607,9 +607,10 @@ class Block {
 
 	get global() {
 		return (
-			this.selectors.length === 1 &&
+			this.selectors.length >= 1 &&
 			this.selectors[0].type === 'PseudoClassSelector' &&
-			this.selectors[0].name === 'global'
+			this.selectors[0].name === 'global' &&
+			this.selectors.every((selector) => selector.type === 'PseudoClassSelector')
 		);
 	}
 }

diff --git a/test/validator/samples/css-invalid-global-placement-2/errors.json b/test/validator/samples/css-invalid-global-placement-2/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "css-invalid-global",
+	"message": ":global(...) can be at the start or end of a selector sequence, but not in the middle",
+	"start": {
+		"line": 2,
+		"column": 6,
+		"character": 14
+	},
+	"end": {
+		"line": 2,
+		"column": 19,
+		"character": 27
+	},
+	"pos": 14
+}]
diff --git a/test/validator/samples/css-invalid-global-placement-2/input.svelte b/test/validator/samples/css-invalid-global-placement-2/input.svelte
@@ -0,0 +1,5 @@
+<style>
+	.foo :global(.bar):first-child .baz {
+		color: red;
+	}
+</style>