fix: ensure StyleDirective and ClassDirective are marked as dynamic (#13205)

If we don't, the corresponding runtime code would never be created if in a static sub tree. Fixes #13193

Author: trueadm

.changeset/twenty-toes-attack.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure StyleDirective and ClassDirective are marked as dynamic

packages/svelte/src/compiler/phases/2-analyze/visitors/ClassDirective.js

@@ -1,10 +1,13 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
 
+import { mark_subtree_dynamic } from './shared/fragment.js';
+
 /**
  * @param {AST.ClassDirective} node
  * @param {Context} context
  */
 export function ClassDirective(node, context) {
+	mark_subtree_dynamic(context.path);
 	context.next({ ...context.state, expression: node.metadata.expression });
 }

packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js

@@ -13,6 +13,8 @@ export function StyleDirective(node, context) {
 		e.style_directive_invalid_modifier(node);
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	if (node.value === true) {
 		// get the binding for node.name and change the binding to state
 		let binding = context.state.scope.get(node.name);
@@ -22,8 +24,6 @@ export function StyleDirective(node, context) {
 				node.metadata.expression.has_state = true;
 			}
 		}
-
-		mark_subtree_dynamic(context.path);
 	} else {
 		context.next();
 

packages/svelte/tests/runtime-runes/samples/directives/_config.js

@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<div><p class="foo" style="color: red;">This text should be red with a class of foo</p></div>`,
+
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+
+		assert.equal(p?.className, `foo`);
+		assert.equal(p?.style.color, `red`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/directives/main.svelte

@@ -0,0 +1,3 @@
+<div>
+	<p style:color="red" class:foo={true}>This text should be red with a class of foo</p>
+</div>