From 71f9940f1744c0424e642fe5265b5a99308e74d9 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Fri, 25 Aug 2017 17:40:35 -0400
Subject: [PATCH] remove leading selectors safely - fixes #783

---
 src/css/Stylesheet.ts                         |  6 ++-
 .../unused-selector-leading/_config.js        | 39 +++++++++++++++++++
 .../unused-selector-leading/expected.css      |  1 +
 .../unused-selector-leading/expected.html     |  1 +
 .../unused-selector-leading/input.html        |  7 ++++
 5 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 test/css/samples/unused-selector-leading/_config.js
 create mode 100644 test/css/samples/unused-selector-leading/expected.css
 create mode 100644 test/css/samples/unused-selector-leading/expected.html
 create mode 100644 test/css/samples/unused-selector-leading/input.html

diff --git a/src/css/Stylesheet.ts b/src/css/Stylesheet.ts
index d0e8612a93..81a2c841bf 100644
--- a/src/css/Stylesheet.ts
+++ b/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;
 			}
 		});
 
diff --git a/test/css/samples/unused-selector-leading/_config.js b/test/css/samples/unused-selector-leading/_config.js
new file mode 100644
index 0000000000..a5ae65ffa2
--- /dev/null
+++ b/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:   }`
+		}
+	]
+};
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-leading/expected.css b/test/css/samples/unused-selector-leading/expected.css
new file mode 100644
index 0000000000..eb0b2678cf
--- /dev/null
+++ b/test/css/samples/unused-selector-leading/expected.css
@@ -0,0 +1 @@
+.bar[svelte-xyz]{color:red}
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-leading/expected.html b/test/css/samples/unused-selector-leading/expected.html
new file mode 100644
index 0000000000..21f585b7e1
--- /dev/null
+++ b/test/css/samples/unused-selector-leading/expected.html
@@ -0,0 +1 @@
+<div svelte-xyz="" class="bar"></div>
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-leading/input.html b/test/css/samples/unused-selector-leading/input.html
new file mode 100644
index 0000000000..7dd640eea6
--- /dev/null
+++ b/test/css/samples/unused-selector-leading/input.html
@@ -0,0 +1,7 @@
+<div class='bar'></div>
+
+<style>
+	.foo, .bar, .baz {
+		color: red;
+	}
+</style>
\ No newline at end of file