handle css vars in <style> tags (fixes #757)

sveltejs · Aug 29, 2017 · ff2e169 · ff2e169
1 parent 87ef5ff
commit ff2e169
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/src/css/Stylesheet.ts b/src/css/Stylesheet.ts
@@ -135,10 +135,15 @@ class Declaration {
 
 	minify(code: MagicString) {
 		const c = this.node.start + this.node.property.length;
-		const first = this.node.value.children[0];
+		const first = this.node.value.children  ?
+			this.node.value.children[0] :
+			this.node.value;
 
-		if (first.start - c > 1) {
-			code.overwrite(c, first.start, ':');
+		let start = first.start;
+		while (/\s/.test(code.original[start])) start += 1;
+
+		if (start - c > 1) {
+			code.overwrite(c, start, ':');
 		}
 	}
 }

diff --git a/test/css/samples/css-vars/expected.css b/test/css/samples/css-vars/expected.css
@@ -0,0 +1 @@
+div[svelte-xyz],[svelte-xyz] div{--test:10}
diff --git a/test/css/samples/css-vars/input.html b/test/css/samples/css-vars/input.html
@@ -0,0 +1,7 @@
+<div></div>
+
+<style>
+	div {
+		--test: 10;
+	}
+</style>