From 54f652e7a616532075028ed5c41e38db74b6dc55 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <lhtan93@gmail.com>
Date: Tue, 29 Jun 2021 14:26:03 +0800
Subject: [PATCH] :global() with pseudo element should be considered as global

---
 src/compiler/compile/css/Selector.ts              |  2 +-
 .../css-invalid-global-placement-3/errors.json    | 15 +++++++++++++++
 .../css-invalid-global-placement-3/input.svelte   |  8 ++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 test/validator/samples/css-invalid-global-placement-3/errors.json
 create mode 100644 test/validator/samples/css-invalid-global-placement-3/input.svelte

diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index 49ba5e71e587..4d6146866a50 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/src/compiler/compile/css/Selector.ts
@@ -610,7 +610,7 @@ class Block {
 			this.selectors.length >= 1 &&
 			this.selectors[0].type === 'PseudoClassSelector' &&
 			this.selectors[0].name === 'global' &&
-			this.selectors.every((selector) => selector.type === 'PseudoClassSelector')
+			this.selectors.every((selector) => selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector')
 		);
 	}
 }
diff --git a/test/validator/samples/css-invalid-global-placement-3/errors.json b/test/validator/samples/css-invalid-global-placement-3/errors.json
new file mode 100644
index 000000000000..dc9d605c2c01
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-placement-3/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": 5,
+		"column": 6,
+		"character": 60
+	},
+	"end": {
+		"line": 5,
+		"column": 19,
+		"character": 73
+	},
+	"pos": 60
+}]
diff --git a/test/validator/samples/css-invalid-global-placement-3/input.svelte b/test/validator/samples/css-invalid-global-placement-3/input.svelte
new file mode 100644
index 000000000000..2a15c1086aee
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-placement-3/input.svelte
@@ -0,0 +1,8 @@
+<style>
+	.foo :global(.bar)::after {
+		color: red;
+	}
+	.foo :global(.bar)::after .baz {
+		color: red;
+	}
+</style>