Merge pull request sveltejs#3250 from davemo/fix/1705-root-pseudo-sel…

…ector-prefix-exemption bugfix: exempt the :root psuedo-selector from the random css prefix
pankajparkar · Jul 23, 2019 · 8c1f48f · 8c1f48f
2 parents 15c57e1 + 1909bb4
commit 8c1f48f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
@@ -62,7 +62,9 @@ export default class Selector {
 			while (i--) {
 				const selector = block.selectors[i];
 				if (selector.type === 'PseudoElementSelector' || selector.type === 'PseudoClassSelector') {
-					if (i === 0) code.prependRight(selector.start, attr);
+					if (selector.name !== 'root') {
+						if (i === 0) code.prependRight(selector.start, attr);
+					}
 					continue;
 				}
 

diff --git a/test/css/samples/css-vars/expected.css b/test/css/samples/css-vars/expected.css
@@ -1 +1 @@
-div.svelte-xyz{--test:10}
+:root{--root-test:20}div.svelte-xyz{--test:10}
diff --git a/test/css/samples/css-vars/input.svelte b/test/css/samples/css-vars/input.svelte
@@ -1,7 +1,10 @@
 <div></div>
 
 <style>
+	:root {
+		--root-test: 20;
+	}
 	div {
 		--test: 10;
 	}
-</style>
+</style>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		div.svelte-xyz{--test:10}
		:root{--root-test:20}div.svelte-xyz{--test:10}