From 46d423d9dbf647e7d8e6d408937312ba694708c1 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 15 Sep 2020 20:39:57 +0800
Subject: [PATCH] fix css specificity for child combinator (#5399)

---
 CHANGELOG.md                                   |  1 +
 src/compiler/compile/css/Selector.ts           |  8 +++-----
 test/css/samples/child-combinator/expected.css |  1 +
 test/css/samples/child-combinator/input.svelte | 14 ++++++++++++++
 4 files changed, 19 insertions(+), 5 deletions(-)
 create mode 100644 test/css/samples/child-combinator/expected.css
 create mode 100644 test/css/samples/child-combinator/input.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1481dd850..ae228a3b0a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+* Fix specificity of certain styles involving a child selector ([#4795](https://github.com/sveltejs/svelte/issues/4795))
 * Fix scoping of styles involving child selector and `*` ([#5370](https://github.com/sveltejs/svelte/issues/5370))
 
 ## 3.25.0
diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index e3e1fa96bb..d18a7e7ba6 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/src/compiler/compile/css/Selector.ts
@@ -65,9 +65,8 @@ export default class Selector {
 
 	transform(code: MagicString, attr: string, max_amount_class_specificity_increased: number) {
 		const amount_class_specificity_to_increase = max_amount_class_specificity_increased - this.blocks.filter(block => block.should_encapsulate).length;
-		attr = attr.repeat(amount_class_specificity_to_increase + 1);
 
-		function encapsulate_block(block: Block) {
+		function encapsulate_block(block: Block, attr: string) {
 			let i = block.selectors.length;
 
 			while (i--) {
@@ -89,15 +88,14 @@ export default class Selector {
 			}
 		}
 
-		this.blocks.forEach((block) => {
+		this.blocks.forEach((block, index) => {
 			if (block.global) {
 				const selector = block.selectors[0];
 				const first = selector.children[0];
 				const last = selector.children[selector.children.length - 1];
 				code.remove(selector.start, first.start).remove(last.end, selector.end);
 			}
-
-			if (block.should_encapsulate) encapsulate_block(block);
+			if (block.should_encapsulate) encapsulate_block(block, index === this.blocks.length - 1 ? attr.repeat(amount_class_specificity_to_increase + 1) : attr);
 		});
 	}
 
diff --git a/test/css/samples/child-combinator/expected.css b/test/css/samples/child-combinator/expected.css
new file mode 100644
index 0000000000..5d50ae16d7
--- /dev/null
+++ b/test/css/samples/child-combinator/expected.css
@@ -0,0 +1 @@
+main.svelte-xyz button.svelte-xyz.svelte-xyz{background-color:red}main.svelte-xyz div.svelte-xyz>button.svelte-xyz{background-color:blue}
\ No newline at end of file
diff --git a/test/css/samples/child-combinator/input.svelte b/test/css/samples/child-combinator/input.svelte
new file mode 100644
index 0000000000..9d5d8d27e0
--- /dev/null
+++ b/test/css/samples/child-combinator/input.svelte
@@ -0,0 +1,14 @@
+<style>
+  main button {
+    background-color: red;
+  }
+
+  main div > button {
+    background-color: blue;
+  }
+</style>
+<main>
+  <div>
+    <button type="submit">Blue</button>
+  </div>
+</main>
\ No newline at end of file