🐛 BUG: Multiline string attributes inside attribute with invalid TSX identifier cause compiler to generate invalid code

[Princesseuh]

What version of @astrojs/compiler are you using?

2.5.2

What package manager are you using?

pnpm

What operating system are you using?

macOS

Describe the Bug

Title is a mouthful, TL;DR, the following valid HTML:

<div
    :class="{
    'bg-zinc-50 ring-1 ring-zinc-200 dark:bg-black/20 dark:ring-zinc-800': tab == 'preview',
    'bg-black': tab != 'preview'
  }"
>
</div>

generates the following invalid TSX, due to the multiline attirbute:

<div {...{":class":"{
    'bg-zinc-50 ring-1 ring-zinc-200 dark:bg-black/20 dark:ring-zinc-800': tab == 'preview',
    'bg-black': tab != 'preview'
  }"}} >
</div>

Using a valid identifier however works (TSX doesn't allow : at the beginning of attributes)

Link to Minimal Reproducible Example

https://live-astro-compiler.vercel.app/?editor-state=WzMxLDEzOSw4LDAsMTAwLDk5LDE5MSwxMDEsMiwzLDIwNSwxNDYsODEsMTA3LDE5NCw0OCwxNiwxOTksMTkxLDc0LDE1MSwxNTEsMTkwLDE2OCwyMzUsMTAsMTk0LDQwLDU4LDE2LDE5OSwxOTgsOTYsMTUsMTk1LDE4NiwyMDUsMTM1LDE5MCw5MiwxNDcsODMsMTM4LDEwNSw4Miw0NiwxNjksMTMwLDIyNiwxMTksMjIzLDE4MSwxMTcsODYsMjMwLDIzLDg4LDk0LDE0NiwyNTIsMjQzLDE4NywxMjcsNDYsMTUxLDU5LDEwLDg5LDE5LDE2MSwyNDEsMTE1LDkxLDg2LDEzMyw3MCwyNTAsNjYsMTE0LDEzMyw1MywzNCwxNywyNDEsMTA0LDYwLDEzOCwxOTcsNjQsNzIsMTcxLDE0NCwxODMsMTksODUsMjM2LDUwLDE5LDI0MCw3MiwxNjQsNiwyMzEsMTY2LDE1Myw1NiwxMTgsMjUxLDQ4LDIyMywxMiwxNSwxMzMsMTQ1LDE5NSwxMTMsMjAsODAsOTcsNTQsMTk1LDEzNSwxMTAsMTA2LDE4MSw1NiwxMzgsMiw1LDE4MCw3NywyNCwyMDIsNTMsMjAwLDIzNywxMjUsMTI0LDIyLDEyMiwyMzAsNDksMTM4LDE5NCwzNiwyNDAsMTQ0LDcsMjExLDEwNSwxNiw4NiwxMzIsMTg3LDIsMjQ3LDIyNSwxNjAsMTE5LDExMSwzLDIwNywyMDAsMjIxLDIxLDIxMCwxNiwxNjcsNzYsMTAwLDIzMCw0MSw1MSwxNDcsMTIzLDc4LDE0NCwxMDMsOTQsOTMsNTAsMjUzLDIxNSwxMzcsMTE0LDEwNSwyNDcsMTUwLDIxMiw1NSw2NSw4NSwxNjEsMTgsMTM3LDE2NywyNiw3LDE2MiwyMzYsMTcwLDE4OSw3Niw4NywxMjQsOTQsMSw1NywyNTIsMTc2LDE3NCwyNDAsMjM3LDE1MSwxNzIsNjUsNTksNzAsNjAsMTI5LDExMywxMDcsNzUsMjI5LDE1NSwyNDEsNzIsNiwyNDQsMjMxLDIyNiwxNTcsNjcsMTUyLDk1LDI0MywxNSwyNiw0MCwyNywxMzEsNTcsMTQ0LDI2LDEyOSwyNDMsMTAwLDg5LDU1LDEyLDEzMSw0NiwxNCwxNjgsOTQsMTIyLDEzMCwyNDUsMTM5LDgzLDEwNiwxMDcsMTQ2LDg4LDY2LDExNywxMjMsMjAxLDE3MiwyNDEsMTIwLDIxMyw1NCw3LDYxLDE2MywxNDEsMjUxLDE5LDIxNiwxODAsMTMsNzIsMTI3LDI3LDE4Miw2NCw4NywxMDcsMTU5LDc0LDIwMywxMTEsNzUsMTgxLDIzNywxMzcsMTY2LDMwLDIwNywyMzIsMTI5LDE5LDgxLDI5LDE5NiwxNTgsMjIxLDIxOSwyOSwxMDYsMTQ4LDMwLDIxMywyNDIsMjE1LDEwMCw5LDU3LDIyMywyMTUsNTQsMjI0LDIxMywxMDUsMTg2LDE4NiwyMTAsNzksNjMsNSwxMjAsMTgzLDk1LDE5NCwyLDAsMF0%3D

[ekfuhrmann]

Just want to add that this seems to effect multiline Alpine.js attributes as was discussed in this Support issue on Discord.

There is a workaround, at least in the context of Alpine.js, that you can wrap the multiline string with a backtick, and then work without any TS errors.