Cannot use a store with the $ prefix with `in:`, `out:` or `transition:`

[jzylks]

Describe the bug

In Svelte 4, you can wrap your transitions in a store and use that store in place of a transition from svelte/transition. In my case, I'm wrapping fly and fade with $accessibleFly to provide reduced motion transitions based on a (prefers-reduced-motion: reduce) media query. For instance:

{#if something}
  <div in:$accessibleFly={{x: 0, y: -200}}>Hello</div>
{/if}

The same code in Svelte 5 throws ReferenceError: $accessibleFly is not defined.

Reproduction

This is a working reproduction in Svelte 4

This does not work in Svelte 5

Logs

Error: $accessibleFly is not defined
message: "$accessibleFly is not defined"
stack: "ReferenceError: $accessibleFly is not defined\n" +
  " at eval (playground:output:2957:21)\n" +
  " at eval (playground:output:1364:6)\n" +
  " at execute_signal_fn (playground:output:1826:73)\n" +
  " at execute_effect (playground:output:1961:30)\n" +
  " at eval (playground:output:1316:9)\n" +
  " at execute_signal_fn (playground:output:1826:73)\n" +
  " at execute_effect (playground:output:1961:30)\n" +
  " at flush_queued_effects (playground:output:2006:7)\n" +
  " at process_microtask (playground:output:2025:3)"

System Info

N/A

Severity

annoyance

[enyo]

A bit off topic since this issue should be fixed anyway, but @jzylks what is the advantage of using a store here, instead of simply wrapping inside a function like this?

function accessibleFade(node, { duration }) {
  if (prefersReducedMotion()) return { duration: 0 }
  // or if you want to use a store:
  // if ($prefersReducedMotion) return { duration: 0 }

  return {
    duration,
    css: (t) => {
      return `opacity: ${t};`;
    }
  };
}