CSS Custom Properties as props needs to be explicitly passed

[JReinhold]

Describe the bug

When passing CSS Custom Properties as props to components, they need to be explicitly set as props and can't be part of spreaded objects or other syntaxes that wouldn't explicitly name the props.

Presumably this is because Svelte does static analysis to determine if a prop is a CSS custom property (... because its name starts with --?), and so if you don't set it explicitly, it will fool the static analysis engine, even though at runtime it is the same code.

I'm struggling with words, but I think the reproduction explains what I mean:
https://svelte.dev/playground/01ffe5b59fe8481ab06c14fa0feea420?version=5.30.2

If my assumption is correct and the problem is static analysis, then I think it's fair that it is this way, then I just think this gotcha needs to be explicitly documented in https://svelte.dev/docs/svelte/custom-properties

Originally discussed in this Discord: https://discord.com/channels/457912077277855764/1373334368243679394/1373334368243679394

Reproduction

https://svelte.dev/playground/01ffe5b59fe8481ab06c14fa0feea420?version=5.30.2

Logs

System Info

Svelte playground with version 5.30.2

Severity

annoyance

[paoloricciuti]

Yeah the problema Is static analysis...to work we need to wrap the component in an element with display contents and the css variables as inline styles.

But yeah let's keep this open to document this behavior