From f64d16931d2e2125c4fbba1631d64570e4db8f7f Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 May 2024 09:08:07 +0200
Subject: [PATCH] fix: detect style shorthands as stateful variables in legacy
 mode (#11421)

Fixes #11417
---
 .changeset/ninety-dots-train.md               |  5 +++
 .../src/compiler/phases/2-analyze/index.js    | 10 ++++++
 .../_config.js                                | 33 +++++++++++++++++++
 .../main.svelte                               | 15 +++++++++
 4 files changed, 63 insertions(+)
 create mode 100644 .changeset/ninety-dots-train.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/inline-style-directive-shorthand-declaration-only/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/inline-style-directive-shorthand-declaration-only/main.svelte

diff --git a/.changeset/ninety-dots-train.md b/.changeset/ninety-dots-train.md
new file mode 100644
index 0000000000..2afde212b1
--- /dev/null
+++ b/.changeset/ninety-dots-train.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: detect style shorthands as stateful variables in legacy mode
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 7a55c575ff..64d35f3989 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/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';
+			}
+		}
 	}
 };
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-shorthand-declaration-only/_config.js b/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-shorthand-declaration-only/_config.js
new file mode 100644
index 0000000000..dfcd5a31fe
--- /dev/null
+++ b/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');
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-shorthand-declaration-only/main.svelte b/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-shorthand-declaration-only/main.svelte
new file mode 100644
index 0000000000..9213a5bb2e
--- /dev/null
+++ b/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>
\ No newline at end of file