Preprocess CSS to include JavaScript

[Evilsushi]

Currently CSS is pretty standard, or we can use a preprocessor to get some extra features but overall, it is fairly limited. However, we can fully manipulate inline styles by adding JavaScript, so why not allow this functionality in the actual style part of the svelte file? It wouldn't be pure CSS but neither is much of the special HTML we use. We could also make standalone stylesheets like this +style.css.svelte or something like that so the preprocessor knows to process them. This would make it much easier to manipulate styles. The final compiled code could just inline all the styles to keep reactivity. Supposedly Inline styles are faster anyway.

for example, this is valid:

<script> 
    let color = "blue";
</script>

<div style={`background:${color}`}></div>

but this isn't:

<style>
    div {
        background: {color};
    }
</style>

[gterras]

I think since it would be quite clunky to handle reactivity (style tags aren't really made for this) it could only preprocess an initial value which would be limiting and confusing.

[Evilsushi]

While that's true that the style tag wasn't made for reactivity, we could render the final reactive output as a style attribute which already allows reactivity. My understanding is that inline styles are actually faster anyhow because they don't have to load external stylesheets. This would just be a dev experience upgrade to make manipulating styles easier. This would be huge IMHO

[gterras]

we could render the final reactive output as a style attribute which already allows reactivity

This would probably be between nightmarish and impossible, notably regarding specificity (your first example scores 1000, the second scores 1), :global would arise conflicts, and probably other confusing cases. It would mean essentially (poorly) recreating what is already available with JS.

[dominikg]

This would just be a dev experience upgrade to make manipulating styles easier.

vite and vite-plugin-svelte already support css hmr. This is not needed for dx and impossible to keep reactive in production. Preprocessors don't work that way. If this was something to pursue, it would have to be implemented in the compiler itself, but with the support for style props on components https://svelte.dev/docs/component-directives#style-props and the ability to set these yourself inside a template, you can already have values update without all of this.

[Evilsushi]

we could render the final reactive output as a style attribute which already allows reactivity

This would probably be between nightmarish and impossible, notably regarding specificity (your first example scores 1000, the second scores 1), :global would arise conflicts, and probably other confusing cases. It would mean essentially (poorly) recreating what is already available with JS.

This is a component, all styles are encapsulated, specificity has very little effect here.

[gterras]

This is a component, all styles are encapsulated, specificity has very little effect here.

Specificity works the same anywhere and component styles are encapsulated using classes, which wouldn't work inline or in the better case create a burning hell of confusion.