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

Author: navorite

.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

@@ -162,10 +162,13 @@ const visitors = {
 		// 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;
 
-			for (let i = 0; i < node.children.length; i += 1) {
-				const selector = node.children[i];
+			const children = node.children;
+
+			let last = children.start;
+
+			for (let i = 0; i < children.length; i += 1) {
+				const selector = children[i];
 
 				if (selector.metadata.used === pruning) {
 					if (pruning) {
@@ -177,7 +180,10 @@ const visitors = {
 						if (i === 0) {
 							state.code.prependRight(selector.start, '/* (unused) ');
 						} else {
-							state.code.overwrite(last, selector.start, ' /* (unused) ');
+							// If this is not the last selector add a separator
+							const separator = i !== children.length - 1 ? ',' : '';
+
+							state.code.overwrite(last, selector.start, `${separator} /* (unused) `);
 						}
 					}
 

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>