fix: don't consider children of rules when checking whether they are used or not (#13410)

Fixes #13390

There's pruning logic in a different place where all unused selectors are commented out. If all selectors are unused, the whole prelude is commented out, resulting in invalid syntax. This is a case that shouldn't happen, therefore simplify the whole "is used" logic to only look at the prelude.

Author: paoloricciuti

.changeset/lazy-queens-agree.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't consider children of rules when checking whether they are used or not

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

@@ -333,7 +333,7 @@ function is_empty(rule) {
 		}
 
 		if (child.type === 'Atrule') {
-			return false; // TODO
+			if (child.block === null || child.block.children.length > 0) return false;
 		}
 	}
 
@@ -342,19 +342,7 @@ function is_empty(rule) {
 
 /** @param {Css.Rule} rule */
 function is_used(rule) {
-	for (const selector of rule.prelude.children) {
-		if (selector.metadata.used) return true;
-	}
-
-	for (const child of rule.block.children) {
-		if (child.type === 'Rule' && is_used(child)) return true;
-
-		if (child.type === 'Atrule') {
-			return true; // TODO
-		}
-	}
-
-	return false;
+	return rule.prelude.children.some((selector) => selector.metadata.used);
 }
 
 /**

packages/svelte/tests/css/samples/unused-nested-at-rule/_config.js

@@ -0,0 +1,21 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			filename: 'SvelteComponent.svelte',
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".unused"',
+			start: {
+				line: 2,
+				column: 1,
+				character: 9
+			},
+			end: {
+				line: 2,
+				column: 8,
+				character: 16
+			}
+		}
+	]
+});

packages/svelte/tests/css/samples/unused-nested-at-rule/expected.css

@@ -0,0 +1,6 @@
+
+	/* (unused) .unused {
+		@media (min-width: 400px) {
+			color: red;
+		}
+	}*/

packages/svelte/tests/css/samples/unused-nested-at-rule/input.svelte

@@ -0,0 +1,7 @@
+<style>
+	.unused {
+		@media (min-width: 400px) {
+			color: red;
+		}
+	}
+</style>