fix: interpolated style directive updates properly with spread (#8505)

fixes #8438

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

@@ -1240,19 +1240,27 @@ export default class ElementWrapper extends Wrapper {
 
 			block.chunks.hydrate.push(updater);
 
+			const self_deps = expression.dynamic_dependencies();
+			const all_deps = new Set([
+				...self_deps,
+				...this.dynamic_style_dependencies
+			]);
+
+			let condition = block.renderer.dirty([...all_deps]);
+
 			// Assume that style has changed through the spread attribute
 			if (has_spread) {
+				if (should_cache && all_deps.size) {
+					// Update the cached value
+					block.chunks.update.push(b`
+						if (${condition}) {
+							${cached_snippet} = ${snippet};
+						}`
+					);
+				}
 				block.chunks.update.push(updater);
 			} else {
-				const self_deps = expression.dynamic_dependencies();
-				const all_deps = new Set([
-					...self_deps,
-					...this.dynamic_style_dependencies
-				]);
-
-				if (all_deps.size === 0) return;
-
-				let condition =  block.renderer.dirty([...all_deps]);
+				if (all_deps.size === 0) return;				
 
 				if (should_cache) {
 					condition = x`${condition} && ${cached_snippet} !== (${cached_snippet} = ${snippet})`;

test/runtime-puppeteer/samples/inline-style-directive-update-with-spread/_config.js

@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<div style="background-color: rgb(255, 0, 0);"></div>
+	`,
+
+	test({ assert, target, window, component }) {
+		const div = target.querySelector('div');
+		const styles = window.getComputedStyle(div);		
+		assert.equal(styles.backgroundColor, 'rgb(255, 0, 0)');
+
+		{
+			component.backgroundColor = 128;
+			const div = target.querySelector('div');
+			const styles = window.getComputedStyle(div);
+			assert.equal(styles.backgroundColor, 'rgb(128, 0, 0)');
+		}
+	}
+};

test/runtime-puppeteer/samples/inline-style-directive-update-with-spread/main.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	export let backgroundColor = 255;
+</script>
+
+<div style:background-color="rgb({backgroundColor}, 0, 0)" {...$$restProps} />