From ee769101fc95688c3045f0fd4f47d09b15bc70c3 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 27 Jul 2021 01:42:10 +0800
Subject: [PATCH] [fix] applying :global for > combinator (#6563)

---
 src/compiler/compile/css/Selector.ts          |  3 ++-
 .../global-with-child-combinator-2/_config.js | 27 +++++++++++++++++++
 .../expected.css                              |  1 +
 .../expected.html                             |  3 +++
 .../input.svelte                              | 15 +++++++++++
 .../global-with-child-combinator-3/_config.js |  3 +++
 .../expected.css                              |  1 +
 .../expected.html                             |  3 +++
 .../input.svelte                              |  9 +++++++
 .../expected.html                             |  3 +++
 10 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 test/css/samples/global-with-child-combinator-2/_config.js
 create mode 100644 test/css/samples/global-with-child-combinator-2/expected.css
 create mode 100644 test/css/samples/global-with-child-combinator-2/expected.html
 create mode 100644 test/css/samples/global-with-child-combinator-2/input.svelte
 create mode 100644 test/css/samples/global-with-child-combinator-3/_config.js
 create mode 100644 test/css/samples/global-with-child-combinator-3/expected.css
 create mode 100644 test/css/samples/global-with-child-combinator-3/expected.html
 create mode 100644 test/css/samples/global-with-child-combinator-3/input.svelte
 create mode 100644 test/css/samples/global-with-child-combinator/expected.html

diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index c88a244a1..d9868f453 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/src/compiler/compile/css/Selector.ts
@@ -227,7 +227,8 @@ function apply_selector(blocks: Block[], node: Element, to_encapsulate: Array<{
 
 			return false;
 		} else if (block.combinator.name === '>') {
-			if (apply_selector(blocks, get_element_parent(node), to_encapsulate)) {
+			const has_global_parent = blocks.every(block => block.global);
+			if (has_global_parent || apply_selector(blocks, get_element_parent(node), to_encapsulate)) {
 				to_encapsulate.push({ node, block });
 				return true;
 			}
diff --git a/test/css/samples/global-with-child-combinator-2/_config.js b/test/css/samples/global-with-child-combinator-2/_config.js
new file mode 100644
index 000000000..2286f4fe3
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-2/_config.js
@@ -0,0 +1,27 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			end: {
+				character: 111,
+				column: 21,
+				line: 8
+			},
+			frame: `
+			 6:     color: red;
+			 7:   }
+			 8:   a:global(.foo) > div {
+			      ^
+			 9:     color: red;
+			10:   }
+			`,
+			message: 'Unused CSS selector "a:global(.foo) > div"',
+			pos: 91,
+			start: {
+				character: 91,
+				column: 1,
+				line: 8
+			}
+		}
+	]
+};
diff --git a/test/css/samples/global-with-child-combinator-2/expected.css b/test/css/samples/global-with-child-combinator-2/expected.css
new file mode 100644
index 000000000..3f406244a
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-2/expected.css
@@ -0,0 +1 @@
+div>div.svelte-xyz.svelte-xyz{color:red}div.svelte-xyz.foo>div.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator-2/expected.html b/test/css/samples/global-with-child-combinator-2/expected.html
new file mode 100644
index 000000000..32ff99e34
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-2/expected.html
@@ -0,0 +1,3 @@
+<div class="svelte-xyz">
+  <div class="svelte-xyz"></div>
+</div>
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator-2/input.svelte b/test/css/samples/global-with-child-combinator-2/input.svelte
new file mode 100644
index 000000000..caf7c5869
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-2/input.svelte
@@ -0,0 +1,15 @@
+<style>
+	:global(div) > div {
+		color: red;
+	}
+	div:global(.foo) > div {
+		color: red;
+	}
+	a:global(.foo) > div {
+		color: red;
+	}
+</style>
+
+<div>
+	<div />
+</div>
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator-3/_config.js b/test/css/samples/global-with-child-combinator-3/_config.js
new file mode 100644
index 000000000..c81f1a9f8
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-3/_config.js
@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};
diff --git a/test/css/samples/global-with-child-combinator-3/expected.css b/test/css/samples/global-with-child-combinator-3/expected.css
new file mode 100644
index 000000000..11c60c714
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-3/expected.css
@@ -0,0 +1 @@
+a>b>div.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator-3/expected.html b/test/css/samples/global-with-child-combinator-3/expected.html
new file mode 100644
index 000000000..32ff99e34
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-3/expected.html
@@ -0,0 +1,3 @@
+<div class="svelte-xyz">
+  <div class="svelte-xyz"></div>
+</div>
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator-3/input.svelte b/test/css/samples/global-with-child-combinator-3/input.svelte
new file mode 100644
index 000000000..146f30263
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-3/input.svelte
@@ -0,0 +1,9 @@
+<style>
+	:global(a) > :global(b) > div {
+		color: red;
+	}
+</style>
+
+<div>
+	<div />
+</div>
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator/expected.html b/test/css/samples/global-with-child-combinator/expected.html
new file mode 100644
index 000000000..32ff99e34
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator/expected.html
@@ -0,0 +1,3 @@
+<div class="svelte-xyz">
+  <div class="svelte-xyz"></div>
+</div>
\ No newline at end of file