From dfd742d532f578f47bc3e414e18e61af030381f7 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 22 Apr 2025 12:03:02 +0200
Subject: [PATCH] fix: don't mark selector lists inside `:global` with multiple
 items as unused (#15817)

Regression from #15762

Fixes #15816
---
 .changeset/wild-actors-retire.md                 |  5 +++++
 .../src/compiler/phases/3-transform/css/index.js |  7 ++++---
 .../tests/css/samples/global-block/_config.js    | 16 ++++++++--------
 .../tests/css/samples/global-block/expected.css  |  4 ++++
 .../tests/css/samples/global-block/input.svelte  |  4 ++++
 5 files changed, 25 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/wild-actors-retire.md

diff --git a/.changeset/wild-actors-retire.md b/.changeset/wild-actors-retire.md
new file mode 100644
index 0000000000..d01a1c169b
--- /dev/null
+++ b/.changeset/wild-actors-retire.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't mark selector lists inside `:global` with multiple items as unused
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 9f1142cce9..cee7ab2791 100644
--- a/packages/svelte/src/compiler/phases/3-transform/css/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js
@@ -196,9 +196,12 @@ const visitors = {
 		next();
 	},
 	SelectorList(node, { state, next, path }) {
+		const parent = path.at(-1);
+
 		// Only add comments if we're not inside a complex selector that itself is unused or a global block
 		if (
-			(!is_in_global_block(path) || node.children.length > 1) &&
+			(!is_in_global_block(path) ||
+				(node.children.length > 1 && parent?.type === 'Rule' && parent.metadata.is_global_block)) &&
 			!path.find((n) => n.type === 'ComplexSelector' && !n.metadata.used)
 		) {
 			const children = node.children;
@@ -260,7 +263,6 @@ const visitors = {
 
 		// if this selector list belongs to a rule, require a specificity bump for the
 		// first scoped selector but only if we're at the top level
-		let parent = path.at(-1);
 		if (parent?.type === 'Rule') {
 			specificity = { bumped: false };
 
@@ -376,7 +378,6 @@ const visitors = {
 };
 
 /**
- *
  * @param {Array<AST.CSS.Node>} path
  */
 function is_in_global_block(path) {
diff --git a/packages/svelte/tests/css/samples/global-block/_config.js b/packages/svelte/tests/css/samples/global-block/_config.js
index a8b11a73ec..18a56e9a97 100644
--- a/packages/svelte/tests/css/samples/global-block/_config.js
+++ b/packages/svelte/tests/css/samples/global-block/_config.js
@@ -7,28 +7,28 @@ export default test({
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".unused :global"',
 			start: {
-				line: 69,
+				line: 73,
 				column: 1,
-				character: 917
+				character: 964
 			},
 			end: {
-				line: 69,
+				line: 73,
 				column: 16,
-				character: 932
+				character: 979
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector "unused :global"',
 			start: {
-				line: 100,
+				line: 104,
 				column: 29,
-				character: 1223
+				character: 1270
 			},
 			end: {
-				line: 100,
+				line: 104,
 				column: 43,
-				character: 1237
+				character: 1284
 			}
 		}
 	]
diff --git a/packages/svelte/tests/css/samples/global-block/expected.css b/packages/svelte/tests/css/samples/global-block/expected.css
index 12f9a75032..be1838fd98 100644
--- a/packages/svelte/tests/css/samples/global-block/expected.css
+++ b/packages/svelte/tests/css/samples/global-block/expected.css
@@ -3,6 +3,10 @@
 		.x {
 			color: green;
 		}
+
+		.a, .selector, .list {
+			color: green;
+		}
 	/*}*/
 
 	div.svelte-xyz {
diff --git a/packages/svelte/tests/css/samples/global-block/input.svelte b/packages/svelte/tests/css/samples/global-block/input.svelte
index ee05205d67..86d438031a 100644
--- a/packages/svelte/tests/css/samples/global-block/input.svelte
+++ b/packages/svelte/tests/css/samples/global-block/input.svelte
@@ -5,6 +5,10 @@
 		.x {
 			color: green;
 		}
+
+		.a, .selector, .list {
+			color: green;
+		}
 	}
 
 	div :global {