fix: style shorthand not referencing variables (#12392)

* fix: style shorthand not referencing variables

* Update .changeset/red-pots-pretend.md

---------

Co-authored-by: Rich Harris <[email protected]>

Author: paoloricciuti

.changeset/red-pots-pretend.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: mark variables in shorthand style directives as referenced

packages/svelte/src/compiler/phases/scope.js

@@ -674,7 +674,18 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 
 		TransitionDirective: SvelteDirective,
 		AnimateDirective: SvelteDirective,
-		UseDirective: SvelteDirective
+		UseDirective: SvelteDirective,
+		// using it's own function instead of `SvelteDirective` because
+		// StyleDirective doesn't have expressions and are generally already
+		// handled by `Identifier`. This is the special case for the shorthand
+		// eg <button style:height /> where the variable has the same name of
+		// the css property
+		StyleDirective(node, { path, state, next }) {
+			if (node.value === true) {
+				state.scope.reference(b.id(node.name), path);
+			}
+			next();
+		}
 
 		// TODO others
 	});

packages/svelte/tests/validator/samples/style-directive-valid-reference/errors.json

@@ -0,0 +1 @@
+[]

packages/svelte/tests/validator/samples/style-directive-valid-reference/input.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let height;
+</script>
+
+<button style:height></button>