fix: preserve the separator between selectors when an unused selector is in between

.changeset/eighty-icons-fold.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: preserve the separator between selectors when an unused selector is in between

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

@@ -196,22 +196,25 @@ const visitors = {
 	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)) {
+			const children = node.children;
 			let pruning = false;
-			let prune_start = node.children[0].start;
+			let prune_start = children[0].start;
 			let last = prune_start;
 
-			for (let i = 0; i < node.children.length; i += 1) {
-				const selector = node.children[i];
+			for (let i = 0; i < children.length; i += 1) {
+				const selector = children[i];
 
 				if (selector.metadata.used === pruning) {
 					if (pruning) {
-						let i = selector.start;
-						while (state.code.original[i] !== ',') i--;
+						let end = selector.start;
+						while (state.code.original[end - 1] !== ',') end--;
+						// If this is an in-between pruned selector keep the last separator
+						if (prune_start !== children[0].start && i !== children.length - 1) end--;
 
 						if (state.minify) {
-							state.code.remove(prune_start, i + 1);
+							state.code.remove(prune_start, end);
 						} else {
-							state.code.overwrite(i, i + 1, '*/');
+							state.code.overwrite(i, end, '*/');
 						}
 					} else {
 						if (i === 0) {

packages/svelte/tests/css/samples/unused-selector-in-between/_config.js

@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			end: {
+				character: 72,
+				column: 3,
+				line: 10
+			},
+			message: 'Unused CSS selector "h4"',
+			start: {
+				character: 70,
+				column: 1,
+				line: 10
+			}
+		}
+	]
+});

packages/svelte/tests/css/samples/unused-selector-in-between/expected.css

@@ -0,0 +1,7 @@
+
+	h1.svelte-xyz,
+	h2.svelte-xyz,
+	h3.svelte-xyz, /* (unused) h4*/
+	p.svelte-xyz {
+		color: red;
+	}

packages/svelte/tests/css/samples/unused-selector-in-between/input.svelte

@@ -0,0 +1,14 @@
+<h1>h1</h1>
+<h2>h2</h2>
+<h3>h3</h3>
+<p>p</p>
+
+<style>
+	h1,
+	h2,
+	h3,
+	h4,
+	p {
+		color: red;
+	}
+</style>