diff --git a/.changeset/red-pots-pretend.md b/.changeset/red-pots-pretend.md
new file mode 100644
index 0000000000..8567ee22ca
--- /dev/null
+++ b/.changeset/red-pots-pretend.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: mark variables in shorthand style directives as referenced
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 604c084ab1..d9a36f4dc7 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/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 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
});
diff --git a/packages/svelte/tests/validator/samples/style-directive-valid-reference/errors.json b/packages/svelte/tests/validator/samples/style-directive-valid-reference/errors.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/style-directive-valid-reference/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/packages/svelte/tests/validator/samples/style-directive-valid-reference/input.svelte b/packages/svelte/tests/validator/samples/style-directive-valid-reference/input.svelte
new file mode 100644
index 0000000000..cccb0dd208
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/style-directive-valid-reference/input.svelte
@@ -0,0 +1,5 @@
+
+
+