fix: detect style shorthands as stateful variables in legacy mode (#11421)

Fixes #11417

Author: paoloricciuti

.changeset/ninety-dots-train.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: detect style shorthands as stateful variables in legacy mode

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -870,6 +870,16 @@ const legacy_scope_tweaker = {
 				}
 			}
 		}
+	},
+	StyleDirective(node, { state }) {
+		// the case for node.value different from true is already covered by the Identifier visitor
+		if (node.value === true) {
+			// get the binding for node.name and change the binding to state
+			let binding = state.scope.get(node.name);
+			if (binding?.mutated && binding.kind === 'normal') {
+				binding.kind = 'state';
+			}
+		}
 	}
 };
 

packages/svelte/tests/runtime-legacy/samples/inline-style-directive-shorthand-declaration-only/_config.js

@@ -0,0 +1,33 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<p style="color: red;"></p>
+		<p style="color: red;"></p>
+		<button></button>
+	`,
+
+	async test({ assert, target, window }) {
+		const [p1, p2] = target.querySelectorAll('p');
+
+		assert.equal(window.getComputedStyle(p1).color, 'red');
+		assert.equal(window.getComputedStyle(p2).color, 'red');
+
+		const btn = target.querySelector('button');
+		console.log(btn);
+		btn?.click();
+		await Promise.resolve();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p style="color: green;"></p>
+			<p style="color: green;"></p>
+			<button></button>
+		`
+		);
+
+		assert.equal(window.getComputedStyle(p1).color, 'green');
+		assert.equal(window.getComputedStyle(p2).color, 'green');
+	}
+});

packages/svelte/tests/runtime-legacy/samples/inline-style-directive-shorthand-declaration-only/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	let color = "red";
+
+	function change(){
+		color = "green";
+	}
+</script>
+
+<p style:color></p>
+
+{#each [1] as _}
+	<p style:color></p>
+{/each}
+
+<button on:click={change}></button>