From b23d267f1f2199606cc2d2a57a278ba35d3afbbb Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Fri, 23 Jul 2021 00:53:45 +0800
Subject: [PATCH] [fix] improper :global() style encapsulation (#6560)

---
 src/compiler/compile/css/Selector.ts                   | 10 ++++------
 .../samples/global-with-child-combinator/_config.js    |  3 +++
 .../samples/global-with-child-combinator/expected.css  |  1 +
 .../samples/global-with-child-combinator/input.svelte  |  9 +++++++++
 4 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 test/css/samples/global-with-child-combinator/_config.js
 create mode 100644 test/css/samples/global-with-child-combinator/expected.css
 create mode 100644 test/css/samples/global-with-child-combinator/input.svelte

diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index 7b3dba375a..c88a244a13 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/src/compiler/compile/css/Selector.ts
@@ -278,14 +278,12 @@ function block_might_apply_to_node(block: Block, node: Element): BlockAppliesToN
 			return BlockAppliesToNode.NotPossible;
 		}
 
-		if (selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector') {
-			continue;
+		if (block.selectors.length === 1 && selector.type === 'PseudoClassSelector' && name === 'global') {
+			return BlockAppliesToNode.NotPossible;
 		}
 
-		if (selector.type === 'PseudoClassSelector' && name === 'global') {
-			// TODO shouldn't see this here... maybe we should enforce that :global(...)
-			// cannot be sandwiched between non-global selectors?
-			return BlockAppliesToNode.NotPossible;
+		if (selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector') {
+			continue;
 		}
 
 		if (selector.type === 'ClassSelector') {
diff --git a/test/css/samples/global-with-child-combinator/_config.js b/test/css/samples/global-with-child-combinator/_config.js
new file mode 100644
index 0000000000..c81f1a9f82
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator/_config.js
@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};
diff --git a/test/css/samples/global-with-child-combinator/expected.css b/test/css/samples/global-with-child-combinator/expected.css
new file mode 100644
index 0000000000..9d8989b63b
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator/expected.css
@@ -0,0 +1 @@
+div>div.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator/input.svelte b/test/css/samples/global-with-child-combinator/input.svelte
new file mode 100644
index 0000000000..3b5ff160c3
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator/input.svelte
@@ -0,0 +1,9 @@
+<style>
+	:global(div) > div {
+		color: red;
+	}
+</style>
+
+<div>
+	<div />
+</div>
\ No newline at end of file