fix: do not comment out unused selectors that are inside an unused selector (#13746)

fixes #13680

.changeset/moody-kids-brake.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: do not comment out unused selectors that are inside an unused selector

packages/svelte/src/compiler/phases/3-transform/css/index.js

@@ -159,6 +159,8 @@ const visitors = {
 		next();
 	},
 	SelectorList(node, { state, next, path }) {
+		// Only add comments if we're not inside a complex selector that itself is unused
+		if (!path.find((n) => n.type === 'ComplexSelector' && !n.metadata.used)) {
 			let pruning = false;
 			let last = node.children[0].start;
 
@@ -188,6 +190,7 @@ const visitors = {
 			if (pruning) {
 				state.code.appendLeft(last, '*/');
 			}
+		}
 
 		// if we're in a `:is(...)` or whatever, keep existing specificity bump state
 		let specificity = state.specificity;

packages/svelte/tests/css/samples/has/_config.js

@@ -86,18 +86,32 @@ export default test({
 				line: 81
 			}
 		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".unused:has(.unused)"',
+			start: {
+				line: 84,
+				column: 1,
+				character: 934
+			},
+			end: {
+				line: 84,
+				column: 21,
+				character: 954
+			}
+		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector "x:has(> z)"',
 			start: {
-				line: 88,
+				line: 91,
 				column: 1,
-				character: 968
+				character: 1021
 			},
 			end: {
-				line: 88,
+				line: 91,
 				column: 11,
-				character: 978
+				character: 1031
 			}
 		}
 	]

packages/svelte/tests/css/samples/has/expected.css

@@ -75,6 +75,9 @@
 	/* (unused) .unused x:has(y) {
 		color: red;
 	}*/
+	/* (unused) .unused:has(.unused)*/ x.svelte-xyz:has(y:where(.svelte-xyz)) {
+		color: green;
+	}
 
 	x.svelte-xyz:has(> y:where(.svelte-xyz)) {
 		color: green;

packages/svelte/tests/css/samples/has/input.svelte

@@ -81,6 +81,9 @@
 	.unused x:has(y) {
 		color: red;
 	}
+	.unused:has(.unused), x:has(y) {
+		color: green;
+	}
 
 	x:has(> y) {
 		color: green;