fix: separate `template_effect` for dynamic class/style directive with dynamic attributes

.changeset/nasty-eggs-walk.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: separate `template_effect` for dynamic class/style directive with dynamic attributes

packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js

@@ -46,7 +46,11 @@ export function build_style_directives(
 		if (!is_attributes_reactive && has_call) {
 			state.init.push(build_update(update));
 		} else if (is_attributes_reactive || has_state || has_call) {
-			state.update.push(update);
+			if (has_state || has_call) {
+				state.init.push(build_update(update));
+			} else {
+				state.update.push(update);
+			}
 		} else {
 			state.init.push(update);
 		}
@@ -77,7 +81,11 @@ export function build_class_directives(
 		if (!is_attributes_reactive && has_call) {
 			state.init.push(build_update(update));
 		} else if (is_attributes_reactive || has_state || has_call) {
-			state.update.push(update);
+			if (has_state || has_call) {
+				state.init.push(build_update(update));
+			} else {
+				state.update.push(update);
+			}
 		} else {
 			state.init.push(update);
 		}

packages/svelte/tests/runtime-runes/samples/dynamic-attribute-and-attribute-directive/_config.js

@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	test({ target, logs, assert }) {
+		const [div, div2] = target.querySelectorAll('div');
+
+		const button = target.querySelector('button');
+		ok(button);
+
+		assert.deepEqual(logs, ['called', 'called']);
+
+		// this is to assert that the order of the attributes is still not relevant
+		// and directives take precedence over generic attribute
+		assert.equal(div.classList.contains('dark'), false);
+		assert.equal(div2.style.color, 'red');
+
+		flushSync(() => {
+			button.click();
+		});
+		assert.deepEqual(logs, ['called', 'called']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/dynamic-attribute-and-attribute-directive/main.svelte

@@ -0,0 +1,26 @@
+<script>
+
+	let value = $state(0);
+	
+	function dark(){
+		console.log('called')
+		return false;
+	}
+
+	function get_class(){
+		return 'dark';
+	}
+
+	function color(){
+		console.log('called')
+		return 'red';
+	}
+
+	function get_style(){
+		return 'color: green';
+	}
+</script>
+
+<div class:dark={dark()} class={get_class()}></div>
+<div style:color={color()} style={get_style()}></div>
+<button onclick={()=> value++}>{value}</button>