fix: ensure comma is also pruned if necessary (#14032)

immediately after merging #14006 I noticed there's a bug when pruning one selector in a list of several; this fixes it

no changeset because not released yet

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

@@ -214,11 +214,15 @@ const visitors = {
 							state.code.overwrite(i, i + 1, '*/');
 						}
 					} else {
-						prune_start = selector.start;
-
-						if (!state.minify) {
-							if (i === 0) {
+						if (i === 0) {
+							if (state.minify) {
+								prune_start = selector.start;
+							} else {
 								state.code.prependRight(selector.start, '/* (unused) ');
+							}
+						} else {
+							if (state.minify) {
+								prune_start = last;
 							} else {
 								state.code.overwrite(last, selector.start, ' /* (unused) ');
 							}

packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_config.js

@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	// test checks that minification works correctly
+	compileOptions: {
+		css: 'external'
+	}
+});

packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected.html

@@ -0,0 +1 @@
+<!--[--><div class="foo svelte-mnmfn6">foo</div><!--]-->

packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected_head.html

@@ -0,0 +1 @@
+<style id="svelte-mnmfn6">.foo.svelte-mnmfn6 {color:green;}.foo.svelte-mnmfn6 {color:green;}</style>

packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/main.svelte

@@ -0,0 +1,23 @@
+<svelte:options css="injected" />
+
+<div class="foo">foo</div>
+
+<style>
+	.foo {
+		color: green;
+	}
+	.unused {
+		color: red;
+	}
+	.unused {
+		.nested-unused {
+			color: red;
+		}
+	}
+	.unused:has(.unused) {
+		color: red;
+	}
+	.foo, .unused {
+		color: green;
+	}
+</style>

packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/Nested.svelte

@@ -6,9 +6,4 @@
 	.bar {
 		color: red;
 	}
-	.unused {
-		.also-unused {
-			color: green;
-		}
-	}
 </style>

packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html

@@ -1 +1 @@
-<!--[--><div class="bar svelte-1fs6vx">bar</div><!----> <div class="foo svelte-sg04hs">foo</div><!--]-->
+<!--[--><div class="bar svelte-ievf05">bar</div><!----> <div class="foo svelte-sg04hs">foo</div><!--]-->

packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html

@@ -1 +1 @@
-<style id="svelte-1fs6vx">.bar.svelte-1fs6vx {color:red;}</style>
+<style id="svelte-ievf05">.bar.svelte-ievf05 {color:red;}</style>