Nested template literals

Astro Info

Astro                    v4.3.5
Node                     v21.6.1
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  @astrojs/vercel
Integrations             @astrojs/svelte
                         @astrojs/tailwind

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

No response

Describe the Bug

Using nested template literals throws an error of expected ")" on a line not present in the file.

Syntax highlighting doesn't show any errors.

<a
   href={social.link}
   class=`${type === 'CARD' && `${social.style} block rounded-lg px-4 py-3 w-fit flex gap-2 items-center`} ${styles}`
>
   <img src={social.icon.src} alt={social.name} class="aspect-square h-5" />
   {type === "CARD" && <div>{social.name}</div>}
</a>

The class attr seems to trigger the error. Err on line 91 but there are only 73 in my component (see Stackblitz).

Wrapping the class with { } fixes the problem.

What's the expected result?

Work with nested template literals without wrapping between { } as non-nested template literals work fine without brackets.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-1hn7ch?file=src%2Fcomponents%2Fsocial.astro

Participation

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

withastro / compiler