Class with template string breaks when HTML tag is variable

[marcelluscaio]

Astro Info

Astro                    v3.4.0
Node                     v18.17.1
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I was using an a tag with multiple classes in a template string.

<a
    class=`button regular-text--small--bold bg-${backgroundColor} text-${color} ${size}`
    href={href}
>
    <slot />
</a> 

This worked fine. I decided to make the tag variable according to props passed to the component. It stopped working. I noticed that if I only had the string part, without the ${} notation, it would work. To make it work with the variable classes, I needed to use class:list

<TagName
    class:list={[
        "button",
        "regular-text--small--bold",
        `bg-${backgroundColor}`,
        `text-${color}`,
        `${size}`,
    ]}
    href={href}
>
    <slot />
</TagName>

What's the expected result?

Being able to use template strings with variable tag, without needing class:list

Link to Minimal Reproducible Example

https://github.com/marcelluscaio/portfolioCaioCabral/blob/projectPage/src/components/Elements/Button.astro

Participation

• [ ] I am willing to submit a pull request for this issue.

[bluwy]

Looks like a compiler bug. If I have <Comp class=`a ${b}` /> (or any template string value), it gets compiled into:

...

return $$render`${$$renderComponent($$result,'Comp',Comp,{"class":`class`})}`;
}, '<stdin>');

...