๐ BUG: Multiline string attributes inside attribute with invalid TSX identifier cause compiler to generate invalid code
Princesseuh opened this issue ยท 1 comments
Princesseuh commented
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
ekfuhrmann commented
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.