diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts
index 571a25f1ac..e6d747dc18 100644
--- a/src/runtime/internal/ssr.ts
+++ b/src/runtime/internal/ssr.ts
@@ -205,7 +205,7 @@ export function add_classes(classes) {
 function style_object_to_string(style_object) {
 	return Object.keys(style_object)
 		.filter(key => style_object[key])
-		.map(key => `${key}: ${style_object[key]};`)
+		.map(key => `${key}: ${escape_attribute_value(style_object[key])};`)
 		.join(' ');
 }
 
diff --git a/test/runtime/samples/css-vars-escape/Sub.svelte b/test/runtime/samples/css-vars-escape/Sub.svelte
new file mode 100644
index 0000000000..4781b65b36
--- /dev/null
+++ b/test/runtime/samples/css-vars-escape/Sub.svelte
@@ -0,0 +1,7 @@
+<div>hi</div>
+
+<style>
+	div {
+		background-color: var(--color);
+	}
+</style>
diff --git a/test/runtime/samples/css-vars-escape/_config.js b/test/runtime/samples/css-vars-escape/_config.js
new file mode 100644
index 0000000000..04defbdae8
--- /dev/null
+++ b/test/runtime/samples/css-vars-escape/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div style="display: contents; --color: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
+			<div class="svelte-271qee">hi</div>
+		</div>
+	`,
+	ssrHtml: `
+		<div style="display: contents; --color:&quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
+			<div class="svelte-271qee">hi</div>
+		</div>
+	`
+};
diff --git a/test/runtime/samples/css-vars-escape/main.svelte b/test/runtime/samples/css-vars-escape/main.svelte
new file mode 100644
index 0000000000..d18e2d57f2
--- /dev/null
+++ b/test/runtime/samples/css-vars-escape/main.svelte
@@ -0,0 +1,6 @@
+<script>
+import Sub from './Sub.svelte';
+  export let attack = '" onload="alert(\'uhoh\')" data-nothing="not important';
+</script>
+
+<Sub --color={attack} />
diff --git a/test/runtime/samples/inline-style-directive-escape/_config.js b/test/runtime/samples/inline-style-directive-escape/_config.js
new file mode 100644
index 0000000000..31666815d9
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-escape/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div style="--css-variable: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;"></div>
+	`,
+
+	test({ assert, component, target }) {
+		component.attack = '" onload="alert(\'uhoh2\')" data-nothing="not important';
+		assert.htmlEqual(target.innerHTML, `
+			<div style="--css-variable: &quot; onload=&quot;alert('uhoh2')&quot; data-nothing=&quot;not important;"></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-escape/main.svelte b/test/runtime/samples/inline-style-directive-escape/main.svelte
new file mode 100644
index 0000000000..fd27bfda6a
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-escape/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let attack = '" onload="alert(\'uhoh\')" data-nothing="not important';
+</script>
+
+<div style:--css-variable={attack} />