Css variable declaration shorthand

[JonathonRP]

Describe the problem

Js variables ability to use in css best option is a style directive, and svelte 5 moving away from directive uses it would not be easily remembered to use which makes it harder to use js in css.

Describe the proposed solution

To be able to use <style --x={x}> to declare css variable with shorthand to make using js variable in css as css variable easier and nicer.

(also see #16071 (comment))

Importance

would make my life easier

[paoloricciuti]

Oh yesterday I wanted to comment on bsky but it errored out.

One thing I don't like about this is that then we would have two ways of doing the same thing and that we would need to wrap everything in an element with display contents especially since doing this is not a huge advantage over style:--var.

I was also wondering: since we don't have props on the style tag we could technically do this

<style {x}>
...
</style>

Which will give you the ability to use the shorthand which you basically can't do now.

I don't know I'm very torn.

[JonathonRP]

This has one advantage over style:--var and that style:--var only works on element. And my use case I actually want to pass variable values from a wrapping element that doesn't have direct access to child element but the css can target it...

[paoloricciuti]

This has one advantage over style:--var and that style:--var only works on element. And my use case I actually want to pass variable values from a wrapping element that doesn't have direct access to child element but the css can target it...

Can you show me an example?

[JonathonRP]

I like your suggestion and also there are two ways to do a lot of things in svelte right now, legacy (children) and not (class)

[JonathonRP]

Can you show me an example?

https://github.com/JonathonRP/motion-start/blob/feature%2Frewrite/src%2Flib%2Fmotion-start%2Fcomponents%2FAnimatePresence%2FPopChild%2FPopChild.svelte

[paoloricciuti]

Yeah but you can just wrap it with an element yourself:

<css-props style:--var={var} style:display="contents">
// Snippet
</css-props>

Which is the same thing svelte would do

[JonathonRP]

That's true but that's a lot to know and svelte is also about the vibes...

I like the

<style {x}>
...
</style>

[Thiagolino8]

Instead of messing with the style tag, one option would be to make props that start with -- be interpreted as css variables

<div --var={var}></div>

So instead of wrapping a component with an extra div as is currently done, you could do as with attachments and simply use the spread on the element you want to use the variable in, or even define one by one

// App.svelte
<Comp --var={var} />

// Comp.svelte
<script>
	let props = $props()
</script>

<div {...props}></div>
// or
<div --var={props['--var']}></div>

Unfortunately, this would be a breaking change.

[dummdidumm]

I don't fully understand this request TBH. Is this a feature request to do the same thing a bit differently in fear of style: going away at some point and/or not being of the same syntax? Or is it requesting something else? Can someone give more context (potentially linking to that bsky thread)?

[paoloricciuti]

@dummdidumm here's the bsky link ...I honestly agree that while it might look interesting is probably to niche of a feature to add considering there's already a way of doing it which is also very simple and more "clear" about what's going on

[dummdidumm]

Ok so this is about supporting

<script>
  let color = 'red';
</script>

<button onclick={() => color = 'blue'}>change color</button>

<style --color={color}>
  button {
    color: var(--color);
  }
</style>