From 555d3db0fdcc2e96bbd32671e9d7f483432214c2 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Fri, 8 Mar 2024 15:40:06 +0100
Subject: [PATCH] fix: bump specificity on all members of a selector list

Previously, only `div span` in `div span, div div { .. }` would've gotten the specificity bump
---
 .changeset/dull-coins-vanish.md                     |  5 +++++
 .../src/compiler/phases/3-transform/css/index.js    |  4 ++++
 .../tests/css/samples/selector-list/expected.css    |  6 ++++++
 .../tests/css/samples/selector-list/expected.html   |  1 +
 .../tests/css/samples/selector-list/input.svelte    | 13 +++++++++++++
 5 files changed, 29 insertions(+)
 create mode 100644 .changeset/dull-coins-vanish.md
 create mode 100644 packages/svelte/tests/css/samples/selector-list/expected.css
 create mode 100644 packages/svelte/tests/css/samples/selector-list/expected.html
 create mode 100644 packages/svelte/tests/css/samples/selector-list/input.svelte

diff --git a/.changeset/dull-coins-vanish.md b/.changeset/dull-coins-vanish.md
new file mode 100644
index 000000000000..2b62f07bb1f2
--- /dev/null
+++ b/.changeset/dull-coins-vanish.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: bump specificity on all members of a selector list
diff --git a/packages/svelte/src/compiler/phases/3-transform/css/index.js b/packages/svelte/src/compiler/phases/3-transform/css/index.js
index ebb65a768c1a..102cf8d7cce6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/css/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js
@@ -191,6 +191,8 @@ const visitors = {
 		next({ ...state, specificity });
 	},
 	ComplexSelector(node, context) {
+		const before_bumped = context.state.specificity.bumped;
+
 		/** @param {import('#compiler').Css.SimpleSelector} selector */
 		function remove_global_pseudo_class(selector) {
 			context.state.code
@@ -261,6 +263,8 @@ const visitors = {
 		}
 
 		context.next();
+
+		context.state.specificity.bumped = before_bumped;
 	},
 	PseudoClassSelector(node, context) {
 		if (node.name === 'is' || node.name === 'where') {
diff --git a/packages/svelte/tests/css/samples/selector-list/expected.css b/packages/svelte/tests/css/samples/selector-list/expected.css
new file mode 100644
index 000000000000..71ea967b645c
--- /dev/null
+++ b/packages/svelte/tests/css/samples/selector-list/expected.css
@@ -0,0 +1,6 @@
+	div.svelte-xyz {
+		color: red;
+	}
+	div.svelte-xyz span:where(.svelte-xyz), div.svelte-xyz div:where(.svelte-xyz) {
+		color: blue;
+	}
diff --git a/packages/svelte/tests/css/samples/selector-list/expected.html b/packages/svelte/tests/css/samples/selector-list/expected.html
new file mode 100644
index 000000000000..6c9d25ffc440
--- /dev/null
+++ b/packages/svelte/tests/css/samples/selector-list/expected.html
@@ -0,0 +1 @@
+<div class="svelte-xyz"><span class="svelte-xyz">text</span><div class="svelte-xyz">text</div></div>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/selector-list/input.svelte b/packages/svelte/tests/css/samples/selector-list/input.svelte
new file mode 100644
index 000000000000..b14882f0a208
--- /dev/null
+++ b/packages/svelte/tests/css/samples/selector-list/input.svelte
@@ -0,0 +1,13 @@
+<div>
+	<span>text</span>
+	<div>text</div>
+</div>
+
+<style>
+	div {
+		color: red;
+	}
+	div span, div div {
+		color: blue;
+	}
+</style>
\ No newline at end of file