diff --git a/src/generators/server-side-rendering/visitors/MustacheTag.ts b/src/generators/server-side-rendering/visitors/MustacheTag.ts
index 29fa7aa083..795e78dd33 100644
--- a/src/generators/server-side-rendering/visitors/MustacheTag.ts
+++ b/src/generators/server-side-rendering/visitors/MustacheTag.ts
@@ -10,5 +10,11 @@ export default function visitMustacheTag(
 	block.contextualise(node.expression);
 	const { snippet } = node.metadata;
 
-	generator.append('${__escape(' + snippet + ')}');
+	generator.append(
+		node.parent &&
+		node.parent.type === 'Element' &&
+		node.parent.name === 'style'
+			? '${' + snippet + '}'
+			: '${__escape(' + snippet + ')}'
+	);
 }
diff --git a/test/runtime/samples/non-root-style-interpolation/_config.js b/test/runtime/samples/non-root-style-interpolation/_config.js
index 3585e61f0b..01cefdd67e 100644
--- a/test/runtime/samples/non-root-style-interpolation/_config.js
+++ b/test/runtime/samples/non-root-style-interpolation/_config.js
@@ -1,12 +1,13 @@
 export default {
 	data: {
 		color: 'red',
+		foo: '/* < & > */',
 	},
 
 	html: `
 		<div>
 			<style>
-			/* something with < and > */
+				/* something with < and > */
 				div {
 					color: blue;
 				}
@@ -27,7 +28,8 @@ export default {
 
 		<div>
 			<style>
-			/* something with < and > */
+				/* something with < and > */
+				/* < & > */
 				div {
 					color: red;
 				}
@@ -38,6 +40,7 @@ export default {
 		<div>
 			<div>
 				<style>
+					/* < & > */
 					div > div {
 						color: red;
 					}
diff --git a/test/runtime/samples/non-root-style-interpolation/main.html b/test/runtime/samples/non-root-style-interpolation/main.html
index 804d2a3ef2..1908f64808 100644
--- a/test/runtime/samples/non-root-style-interpolation/main.html
+++ b/test/runtime/samples/non-root-style-interpolation/main.html
@@ -1,6 +1,6 @@
 <div>
 	<style>
-	/* something with < and > */
+		/* something with < and > */
 		div {
 			color: blue;
 		}
@@ -21,7 +21,8 @@
 
 <div>
 	<style>
-	/* something with < and > */
+		/* something with < and > */
+		{{foo}}
 		div {
 			color: {{color}};
 		}
@@ -32,6 +33,7 @@
 <div>
 	<div>
 		<style>
+			{{foo}}
 			div > div {
 				color: {{color}};
 			}