refactor and fix precedence for non-cached values

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

@@ -1145,40 +1145,43 @@ export default class ElementWrapper extends Wrapper {
 			if (has_spread) {
 				block.chunks.update.push(updater);
 			} else {
-				const deps = [
+				const self_deps = expression.dynamic_dependencies();
-					...expression.dynamic_dependencies().filter(dep => !this.dynamic_style_dependencies.has(dep)),
+				const all_deps = new Set([
+					...self_deps,
 					...this.dynamic_style_dependencies
-				];
+				]);
-
-				if (deps.length > 0) {
-					if (deps.length === this.dynamic_style_dependencies.size) {
-						maybe_create_style_changed_var();
-						block.chunks.update.push(b`
-							if (${style_changed_var}) {
-								${updater}
-							}
-						`);
-						return;
-					}
-
-					let condition =  block.renderer.dirty(deps);
 
-					if (should_cache) {
+				if (all_deps.size === 0) return;
-						condition = x`${condition} && ${cached_snippet} !== (${cached_snippet} = ${snippet})`;
-
-						maybe_create_style_changed_var();
-						if (style_changed_var) {
-							condition = x`${style_changed_var} || ${condition}`;
-						}
-					}
 
+				if (all_deps.size === this.dynamic_style_dependencies.size) {
+					// Only needed to maintain style directive precedence, we can skip the dirty check	
+					maybe_create_style_changed_var();
 					block.chunks.update.push(b`
-						if (${condition}) {
+						if (${style_changed_var}) {
 							${updater}
 						}
 					`);
+					return;
+				}
+
+				let condition =  block.renderer.dirty([...all_deps]);
+
+				if (should_cache) {
+					condition = x`${condition} && ${cached_snippet} !== (${cached_snippet} = ${snippet})`;
+				}
+
+				if (this.dynamic_style_dependencies.size > 0) {
+					maybe_create_style_changed_var();
+					condition = x`${style_changed_var} || ${condition}`;
 				}
+
+				block.chunks.update.push(b`
+					if (${condition}) {
+						${updater}
+					}
+				`);
 			}
+			
 		});
 	}
 

test/runtime-puppeteer/samples/inline-style-directive-precedence/_config.js

@@ -1,6 +1,6 @@
 export default {
 	html: `
-		<p style="font-size: 32px; color: red; background-color: green;"></p>
+		<p style="font-size: 32px; color: red; background-color: green; border-color: green;"></p>
 	`,
 
 	test({ assert, target, window, component }) {
@@ -9,6 +9,7 @@ export default {
 		assert.equal(styles.color, 'rgb(255, 0, 0)');
 		assert.equal(styles.fontSize, '32px');
 		assert.equal(styles.backgroundColor, 'rgb(0, 128, 0)');
+		assert.equal(styles.borderColor, 'rgb(0, 128, 0)');
 
 		component.foo = 'font-size: 50px; color: green;'; // Update style attribute
 		{
@@ -17,6 +18,7 @@ export default {
 			assert.equal(styles.color, 'rgb(255, 0, 0)');
 			assert.equal(styles.fontSize, '32px');
 			assert.equal(styles.backgroundColor, 'rgb(0, 128, 0)');
+			assert.equal(styles.borderColor, 'rgb(0, 128, 0)');
 		}
 	}
 };

test/runtime-puppeteer/samples/inline-style-directive-precedence/main.svelte

@@ -1,8 +1,15 @@
 <script>
 	export let foo = "font-size: 20px; color: blue;";
-	let bar = "32";
+	let baz = "red"; // static value
-	let baz = "red";
+	let bar = "32"; // static value interpolated
-	export let bg = "gre";
+	export let bg = "gre"; // dynamic value interpolated/cached
+	export let borderColor = "green"; // dynamic value non-cached
 </script>
 
-<p style:font-size="{bar}px" style:color={baz} style="{foo}" style:background-color="{bg}en" />
+<p
+	style:font-size="{bar}px"
+	style:color={baz}
+	style="{foo}"
+	style:background-color="{bg}en"
+	style:border-color={borderColor}
+/>