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.

Author: kelvinsjk

.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

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}) {

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');
+		}
+	}
+};

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}" />