From 8486b9f9047c955adc0ef060af7c52952355f274 Mon Sep 17 00:00:00 2001
From: gtmnayan <gtmnayan@gmail.com>
Date: Sun, 16 Apr 2023 08:30:03 +0545
Subject: [PATCH] fix: interpolated style directive updates properly with
 spread

---
 .../render_dom/wrappers/Element/index.ts      | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index cefebfcff3..fb46df068e 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/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})`;