Dyamic Styles

[dm-de]

This is a short example (this do not work in svelte)

<script>
	export var color = '#000'
</script>

<style>
	button {
		background-color: {color}
	}
</style>

<button><slot/></button>

What if...
svelte compiler could detect a style with {color}
and remove this from generated STATIC css
But instead this lines goes to a DYNAMIC css class

Here some js ideas:
https://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply

And when color value changes, we could update dynamic class

[Conduitry]

This is sort of adjacent to #758, which discusses compiling this sort of thing to use CSS variables. I don't think the syntax here is ever going to be something that ever gets implemented, however, because of the parsing nightmare it would pose. Braces are already used all over the place in CSS. We're currently using a third-party library to handle the CSS parsing, and we'd likely have to completely redo that to support { } expressions in CSS values.

Writing this using CSS vars manually is how I would suggest doing something like this. You also may be interested in this proposal which describes some (unimplemented) syntactical sugar for passing CSS vars to components.