passing string into is:inline style tag doesn't render said string as child text about astro HOT 6 OPEN

I think it's more that the compiler always expect CSS syntax in the <style> tag, so it sees the children as CSS and doesn't do JSX style interpolation. set:html seems like the better way for me.

from astro.

set:html does work, but I would expect that passing a string as a child to be escaped just like passing a string to any child tag. So I do think this is a case of the compiler having an issue specifically with style tags.

from astro.

(context is that we were talking about removing define:vars possibly in 5.0 and this seems like a fine alternative, hopefully an idea you would like @bluwy 😀)

from astro.

Sorry misclosed whle switching tab 😅 Typing my proper comment next

from astro.

If we have the compiler allowing {} within style tags, and also CSS syntax, wouldn't it be ambiguous when parsing? Unless we hardcode checking {` as the first character.

I'm open to re-thinking how interpolating vars work though. I think the ideal way is something like this?

<style is:inline>
  h1 {
    color: ${color};
  }
</style>

So you can use normal CSS syntax, and easily interpolate variables. I wrote an RFC for Svelte before (which didn't go through), but the conclusion was the same v-bind syntax as Vue as it's valid CSS syntax. We also get better syntax highlighting this way.

from astro.