Merge pull request #1163 from sveltejs/non-root-rework

Rework handling of non-root <script> and <style>

Author: Rich-Harris

src/generators/nodes/Element.ts

@@ -415,7 +415,13 @@ export default class Element extends Node {
 		}
 
 		function toHTML(node: Element | Text) {
-			if (node.type === 'Text') return escapeHTML(node.data);
+			if (node.type === 'Text') {
+				return node.parent &&
+					node.parent.type === 'Element' &&
+					(node.parent.name === 'script' || node.parent.name === 'style')
+					? node.data
+					: escapeHTML(node.data);
+			}
 
 			let open = `<${node.name}`;
 
@@ -433,10 +439,6 @@ export default class Element extends Node {
 
 			if (isVoidElementName(node.name)) return open + '>';
 
-			if (node.name === 'script' || node.name === 'style') {
-				return `${open}>${node.data}</${node.name}>`;
-			}
-
 			return `${open}>${node.children.map(toHTML).join('')}</${node.name}>`;
 		}
 	}

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

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

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

@@ -8,5 +8,14 @@ export default function visitText(
 	block: Block,
 	node: Node
 ) {
-	generator.append(escapeHTML(escape(node.data).replace(/(\${|`|\\)/g, '\\$1')));
+	let text = escape(node.data).replace(/(\${|`|\\)/g, '\\$1');
+	if (
+		!node.parent ||
+		node.parent.type !== 'Element' ||
+		(node.parent.name !== 'script' && node.parent.name !== 'style')
+	) {
+		// unless this Text node is inside a <script> or <style> element, escape &,<,>
+		text = escapeHTML(text);
+	}
+	generator.append(text);
 }

src/parse/state/tag.ts

@@ -224,10 +224,22 @@ 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);
+		const start = parser.index;
+		const data = parser.readUntil(/<\/script>/);
+		const end = parser.index;
+		element.children.push({ start, end, type: 'Text', data });
+		parser.eat('</script>', 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,49 @@
+export default {
+	data: {
+		color: 'red',
+	},
+
+	html: `
+		<div>
+			<style>
+			/* something with < and > */
+				div {
+					color: blue;
+				}
+			</style>
+			foo
+		</div>
+
+		<div>
+			<div>
+				<style>
+					div > div {
+						color: blue;
+					}
+				</style>
+				foo
+			</div>
+		</div>
+
+		<div>
+			<style>
+			/* something with < and > */
+				div {
+					color: red;
+				}
+			</style>
+			foo
+		</div>
+
+		<div>
+			<div>
+				<style>
+					div > div {
+						color: red;
+					}
+				</style>
+				foo
+			</div>
+		</div>
+	`,
+};

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

@@ -0,0 +1,41 @@
+<div>
+	<style>
+	/* something with < and > */
+		div {
+			color: blue;
+		}
+	</style>
+	foo
+</div>
+
+<div>
+	<div>
+		<style>
+			div > div {
+				color: blue;
+			}
+		</style>
+		foo
+	</div>
+</div>
+
+<div>
+	<style>
+	/* something with < and > */
+		div {
+			color: {{color}};
+		}
+	</style>
+	foo
+</div>
+
+<div>
+	<div>
+		<style>
+			div > div {
+				color: {{color}};
+			}
+		</style>
+		foo
+	</div>
+</div>

test/runtime/samples/script-style-non-top-level/_config.js

@@ -0,0 +1,8 @@
+export default {
+	html: `
+		<div>
+			<style>div { color: red; }</style>
+			<script>alert('<>');</script>
+		</div>
+	`
+};

test/runtime/samples/script-style-non-top-level/main.html

@@ -0,0 +1,4 @@
+<div>
+	<style>div { color: red; }</style>
+	<script>alert('<>');</script>
+</div>