From d5a1822428f71aec3289f416229c3c96ba4fa010 Mon Sep 17 00:00:00 2001
From: Kelvin Soh <64682375+kelvinsjk@users.noreply.github.com>
Date: Wed, 20 Sep 2023 15:49:50 +0800
Subject: [PATCH] fix: style directive not updating when style attribute is
 present and style directive is updated via an object prop. fixes #9185
 (#9187)

fixes #9185.

I narrowed down the issue to the bug surfacing when we use object properties to update style attributes and directives. This fix removes the size check (because a single object will be of size 1 but can affect n attributes/directives via its properties).

In addition, the order of the OR is switched as the earlier condition has some reactive assignments which are not run in the current order when style_changed_var is truthy.
---
 .changeset/chilled-tigers-tie.md              |  5 +++++
 .../render_dom/wrappers/Element/index.js      |  6 +-----
 .../_config.js                                | 20 +++++++++++++++++++
 .../main.svelte                               | 12 +++++++++++
 4 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/chilled-tigers-tie.md
 create mode 100644 packages/svelte/test/runtime/samples/inline-style-directive-update-object-property/_config.js
 create mode 100644 packages/svelte/test/runtime/samples/inline-style-directive-update-object-property/main.svelte

diff --git a/.changeset/chilled-tigers-tie.md b/.changeset/chilled-tigers-tie.md
new file mode 100644
index 0000000000..3b6954245a
--- /dev/null
+++ b/.changeset/chilled-tigers-tie.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: update style directive when style attribute is present and is updated via an object prop
diff --git a/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/index.js b/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/index.js
index b8a09b91af..bf87a2ec38 100644
--- a/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/index.js
+++ b/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/index.js
@@ -1240,11 +1240,7 @@ export default class ElementWrapper extends Wrapper {
 				}
 				if (this.dynamic_style_dependencies.size > 0) {
 					maybe_create_style_changed_var();
-					// If all dependencies are same as the style attribute dependencies, then we can skip the dirty check
-					condition =
-						all_deps.size === this.dynamic_style_dependencies.size
-							? style_changed_var
-							: x`${style_changed_var} || ${condition}`;
+					condition = x`${condition} || ${style_changed_var}`;
 				}
 				block.chunks.update.push(b`
 					if (${condition}) {
diff --git a/packages/svelte/test/runtime/samples/inline-style-directive-update-object-property/_config.js b/packages/svelte/test/runtime/samples/inline-style-directive-update-object-property/_config.js
new file mode 100644
index 0000000000..e3c6d72cd1
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/inline-style-directive-update-object-property/_config.js
@@ -0,0 +1,20 @@
+export default {
+	html: `
+		<p style="background-color: green; font-size: 12px;"></p>
+	`,
+
+	test({ assert, target, window, component }) {
+		const p = target.querySelector('p');
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.backgroundColor, 'green');
+		assert.equal(styles.fontSize, '12px');
+
+		{
+			component.modify = true;
+			const p = target.querySelector('p');
+			const styles = window.getComputedStyle(p);
+			assert.equal(styles.backgroundColor, 'green');
+			assert.equal(styles.fontSize, '50px');
+		}
+	}
+};
diff --git a/packages/svelte/test/runtime/samples/inline-style-directive-update-object-property/main.svelte b/packages/svelte/test/runtime/samples/inline-style-directive-update-object-property/main.svelte
new file mode 100644
index 0000000000..0a643bdf48
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/inline-style-directive-update-object-property/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let settings = {
+		fontSize: 12,
+		bg: 'green'
+	};
+	export let modify = false;
+	$: if (modify) {
+		settings.fontSize = 50;
+	}
+</script>
+
+<p style:font-size="{settings.fontSize}px" style="background-color: {settings.bg}" />