Merge pull request #3432 from sveltejs/gh-1830

bail out of style tag optimisation when appropriate

Author: Rich-Harris

src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts

@@ -110,8 +110,9 @@ function get_style_value(chunks: Array<Text | Expression>) {
 	let in_url = false;
 	let quote_mark = null;
 	let escaped = false;
+	let closed = false;
 
-	while (chunks.length) {
+	while (chunks.length && !closed) {
 		const chunk = chunks.shift();
 
 		if (chunk.type === 'Text') {
@@ -132,6 +133,7 @@ function get_style_value(chunks: Array<Text | Expression>) {
 				} else if (char === 'u' && chunk.data.slice(c, c + 4) === 'url(') {
 					in_url = true;
 				} else if (char === ';' && !in_url && !quote_mark) {
+					closed = true;
 					break;
 				}
 

test/runtime/samples/inline-style-optimisation-bailout/_config.js

@@ -0,0 +1,20 @@
+export default {
+	html: `
+		<p style="opacity: 0.5; color: red">color: red</p>
+	`,
+
+	test({ assert, component, target, window }) {
+		const p = target.querySelector('p');
+
+		let styles = window.getComputedStyle(p);
+		assert.equal(styles.opacity, '0.5');
+		assert.equal(styles.color, 'red');
+
+		component.styles = 'font-size: 20px';
+
+		styles = window.getComputedStyle(p);
+		assert.equal(styles.opacity, '0.5');
+		assert.equal(styles.color, '');
+		assert.equal(styles.fontSize, '20px');
+	}
+}

test/runtime/samples/inline-style-optimisation-bailout/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let styles = `color: red`;
+</script>
+
+<p style="opacity: 0.5; {styles}">{styles}</p>