fix: don't mark selector lists inside :global with multiple items as unused

dummdidumm · dummdidumm · commit 5692de7de825 · 2025-04-22T11:50:31.000+02:00
Regression from #15762 Fixes #15816
diff --git a/.changeset/wild-actors-retire.md 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
@@ -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
@@ -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
@@ -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
@@ -5,6 +5,10 @@
 		.x {
 			color: green;
 		}
+
+		.a, .selector, .list {
+			color: green;
+		}
 	}
 
 	div :global {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte': patch
 +---
++
 +fix: don't mark selector lists inside `:global` with multiple items as unused
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,10 @@`
`5`	`5`	`.x {`
`6`	`6`	`color: green;`
`7`	`7`	`}`
	`8`	`+`
	`9`	`+ .a, .selector, .list {`
	`10`	`+ color: green;`
	`11`	`+ }`
`8`	`12`	`}`
`9`	`13`
`10`	`14`	`div :global {`