diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index 005e5320fd..ef54f789fc 100644
--- 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
index ccb7a3ec48..c2bd56375b 100644
--- a/test/css/samples/css-vars/expected.css
+++ b/test/css/samples/css-vars/expected.css
@@ -1 +1 @@
-div.svelte-xyz{--test:10}
\ No newline at end of file
+:root{--root-test:20}div.svelte-xyz{--test:10}
\ No newline at end of file
diff --git a/test/css/samples/css-vars/input.svelte b/test/css/samples/css-vars/input.svelte
index dafa7d09e4..7aa48617a4 100644
--- 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>
\ No newline at end of file
+</style>