Tag interpolation in non-root <style> tag stopped working

[cristinecula]

Hi there!

I'm building skinnable frontend components using Svelte and I was relying on a behavior that stopped working in a recent release: interpolating css values in a non-root <style> tag.

Here is a working example using v1.51.0
https://svelte.technology/repl?version=1.51.0&gist=fb8f986fe7e00f96a21ac739dd86e109
This stopped working on v1.51.1
https://svelte.technology/repl?version=1.51.1&gist=fb8f986fe7e00f96a21ac739dd86e109

I'm not sure if this behavior was a feature or a bug, but I found it very useful for generating dynamic css that defined hover states and animations.

Would you consider making it work again?

[Conduitry]

Interesting. This would have stopped working in #1082 / #1086. I changed how non-top-level <script> and <style> tags were being parsed (no longer attempting to parse them as HTML, and instead parsing them as one solid string until the closing tag). In that ticket I had decided against supporting something like this, but if there's reason to support that, this can be revisited. However, I'm not sure whether it would be confusing to always try to parse {{tags}} in these elements. Maybe we should only allow tags in non-root <style> elements, and parse them just as regular text in <script>s?

[cristinecula]

I think that supporting {{tags}} in <style> elements makes sense, because changes to a <style>'s innerText are applied immediately. Changes to a <script> element do not trigger a script re-evaluation AFAIK. Maybe some optimizations are in order, considering that <style> cannot contain other HTML tags, but you're the judge of that.

Personally, I don't find this feature confusing. Quite the contrary; I expected it to work on top-level <style> tags too. I have come to realize that the global nature of the top-level style tag is not compatible with dynamic styles, because two instances of the same component could use different css values.

For my work I use a combination of css interpolation and css variables. The components use top-level style tags with customizable values defined as css vars, and a single non-top-level style tag in the main component is used to do the css interpolation:
https://svelte.technology/repl?version=1.51.0&gist=f3c7b2fd21888febbdd72acec07a7acc

This example is a bit too simplified, because I could simply pass the color as an attribute, but it gets too noisy when 5+ style attributes are involved.

[cristinecula]

@Conduitry Thank you for working on this! I'll close this issue, seeing that it's been included in the latest release.