What about variables in css?

[AlexRMU]

Several years have passed since this topic was mentioned for the first time.

Recent issues:
sveltejs/svelte#758
sveltejs/svelte#3815
sveltejs/svelte#4354
sveltejs/svelte#4355
sveltejs/svelte#5034
...

This is partially implemented through the style tag, and should be implemented by default, as well as variables in html. They wanted to add it back in 2018. Vue has already added this.
The answer from the team: we are not interested in the implementation, we need to support IE, use css variables, it's a parsing nightmare, it doesn't work well with the IDE.
This resulted in sveltejs/rfcs#13, which is not exactly what is needed. Then appeared sveltejs/rfcs#51, but they decided to close it.

Now they suggest using css variables: https://sveltesociety.dev/recipes/svelte-language-fundamentals/passing-values-from-js-to-css
But this is just a workaround.

Is it really not necessary?

[dominikg]

Creating css at runtime isn't optimal. The way svelte component styles are currently static allows us to externalize them into separate css files at buildtime, which has better runtime characteristics (file can be preloaded in parallel, cached, parsing and evaluation happens earlier etcpp).

You can use css props in templates as shown in the sveltesociety recipe, add them to components automatically via --style-prop attributes https://svelte.dev/docs#template-syntax-component-directives---style-props , use class:foo={condition} for conditional styling and style={dynamicStyle} to add your own dynamic styling where you really have to.

css props is the platform solution for variables in css and for situations where they are not enough, svelte offers dynamic class and style attributes. What exactly are you missing that would justify implementing a complex feature that could also lead to worse runtime performance when not applied correctly?

[AlexRMU]

Yes, it's a difficult thing.
In other popular frameworks, such as react and vue, it is there, but through css-in-js (so it is possible in svelte - sveltejs/svelte#758 (comment)).

I had to make this discussion not in the kit but in the svelte itself.
I think the point is that a workaround is being used now.
A person should create a css variable, give it an initial value if necessary, then put it in the desired property, then pass the js variable via inline.
Why shouldn't svelte do it itself? The compiler creates an encapsulated css variable and puts it in the desired property, then assigns it the value of the desired variable. Properties with variables will be in the js code, and the rest as usual.

/* in */

.main {
  background-color: red;
  width: 100px;
  height: {height}px;
}

/* out */

/* in js */
.main.svelte-asd456 {
  --svelte-qwe123: 100px;
}
/* in js/.css */
.main.svelte-asd456 {
  background-color: red;
  width: 100px;
  height: var(--svelte-qwe123);
}

Or without variables, just on js.