From d720f0bb00114c94a96ab359fa11f431ed594cb4 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Mon, 19 Aug 2019 23:12:04 -0400
Subject: [PATCH] bail out of style tag optimisation when appropriate - fixes
 #1830

---
 .../wrappers/Element/StyleAttribute.ts        |  4 +++-
 .../_config.js                                | 20 +++++++++++++++++++
 .../main.svelte                               |  5 +++++
 3 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/inline-style-optimisation-bailout/_config.js
 create mode 100644 test/runtime/samples/inline-style-optimisation-bailout/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts b/src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts
index ab764a8583..7f9dd2ee95 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts
+++ b/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;
 				}
 
diff --git a/test/runtime/samples/inline-style-optimisation-bailout/_config.js b/test/runtime/samples/inline-style-optimisation-bailout/_config.js
new file mode 100644
index 0000000000..b294e38bbc
--- /dev/null
+++ b/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');
+	}
+}
\ No newline at end of file
diff --git a/test/runtime/samples/inline-style-optimisation-bailout/main.svelte b/test/runtime/samples/inline-style-optimisation-bailout/main.svelte
new file mode 100644
index 0000000000..35b768547e
--- /dev/null
+++ b/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>
\ No newline at end of file