remove leading selectors safely - fixes #783

src/css/Stylesheet.ts

@@ -30,15 +30,19 @@ class Rule {
 
 	minify(code: MagicString, cascade: boolean) {
 		let c = this.node.start;
+		let started = false;
+
 		this.selectors.forEach((selector, i) => {
 			if (cascade || selector.used) {
-				const separator = i > 0 ? ',' : '';
+				const separator = started ? ',' : '';
 				if ((selector.node.start - c) > separator.length) {
 					code.overwrite(c, selector.node.start, separator);
 				}
 
 				if (!cascade) selector.minify(code);
 				c = selector.node.end;
+
+				started = true;
 			}
 		});
 

test/css/samples/unused-selector-leading/_config.js

@@ -0,0 +1,39 @@
+export default {
+	cascade: false,
+
+	warnings: [
+		{
+			filename: "SvelteComponent.html",
+			message: "Unused CSS selector",
+			loc: {
+				line: 4,
+				column: 1
+			},
+			pos: 34,
+			frame: `
+				2:
+				3: <style>
+				4:   .foo, .bar, .baz {
+				     ^
+				5:     color: red;
+				6:   }`
+		},
+
+		{
+			filename: "SvelteComponent.html",
+			message: "Unused CSS selector",
+			loc: {
+				line: 4,
+				column: 13
+			},
+			pos: 46,
+			frame: `
+				2:
+				3: <style>
+				4:   .foo, .bar, .baz {
+				                 ^
+				5:     color: red;
+				6:   }`
+		}
+	]
+};

test/css/samples/unused-selector-leading/expected.css

@@ -0,0 +1 @@
+.bar[svelte-xyz]{color:red}

test/css/samples/unused-selector-leading/expected.html

@@ -0,0 +1 @@
+<div svelte-xyz="" class="bar"></div>

test/css/samples/unused-selector-leading/input.html

@@ -0,0 +1,7 @@
+<div class='bar'></div>
+
+<style>
+	.foo, .bar, .baz {
+		color: red;
+	}
+</style>