support tag interpolation in non-root <style> elements (#1147)

Author: Conduitry

src/generators/nodes/Element.ts

@@ -433,7 +433,7 @@ export default class Element extends Node {
 
 			if (isVoidElementName(node.name)) return open + '>';
 
-			if (node.name === 'script' || node.name === 'style') {
+			if (node.name === 'script') {
 				return `${open}>${node.data}</${node.name}>`;
 			}
 

src/generators/server-side-rendering/visitors/Element.ts

@@ -68,7 +68,7 @@ export default function visitElement(
 
 	if (node.name === 'textarea' && textareaContents !== undefined) {
 		generator.append(textareaContents);
-	} else if (node.name === 'script' || node.name === 'style') {
+	} else if (node.name === 'script') {
 		generator.append(escape(node.data));
 	} else {
 		node.children.forEach((child: Node) => {

src/parse/state/tag.ts

@@ -224,11 +224,20 @@ export default function tag(parser: Parser) {
 		);
 		parser.read(/<\/textarea>/);
 		element.end = parser.index;
-	} else if (name === 'script' || name === 'style') {
+	} else if (name === 'script') {
 		// special case
 		element.data = parser.readUntil(new RegExp(`</${name}>`));
 		parser.eat(`</${name}>`, true);
 		element.end = parser.index;
+	} else if (name === 'style') {
+		// special case
+		element.children = readSequence(
+			parser,
+			() =>
+				parser.template.slice(parser.index, parser.index + 8) === '</style>'
+		);
+		parser.read(/<\/style>/);
+		element.end = parser.index;
 	} else {
 		parser.stack.push(element);
 	}

test/runtime/samples/non-root-style-interpolation/_config.js

@@ -0,0 +1,15 @@
+export default {
+	data: {
+		color: 'red',
+	},
+
+	html: `
+		<div>
+			<style>
+				div {
+					color: red;
+				}
+			</style>
+			foo
+		</div>`,
+};

test/runtime/samples/non-root-style-interpolation/main.html

@@ -0,0 +1,8 @@
+<div>
+	<style>
+		div {
+			color: {{color}};
+		}
+	</style>
+	foo
+</div>