withastro/compiler

Links within template Elements cause wrong HTML parsing/output

diesieben07 opened this issue · 2 comments

diesieben07 commented

Astro Info

Astro                    v4.4.1
Node                     v20.11.1
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

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

n/a

Describe the Bug

Astro fails to parse a elements within template elements correctly in certain situations.
If the content of the a element is an expression, Astro emits the a element again after the template element.
The following is not handled correctly:

<template>
    <a href="https://example.com">{text}</a>.
</template>
<p>Some text</p>

The emitted HTML is equivalent to the following:

<template>
    <a href="https://example.com">Text</a>.
</template>
<a href="https://example.com">
<p>Some text</p>
</a>

This problem does not occur if the a Element only contains plain text (i.e. not an expression).

What's the expected result?

Astro should parse/emit a elements within template elements correctly.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-5amjgj?file=src%2Fpages%2Findex.astro

Participation

  • I am willing to submit a pull request for this issue.
diesieben07 commented

@Princesseuh I saw that you moved this issue to the compiler project. I threw together a quick test with @astrojs/compiler and it seems it generates the correct AST. I have shared the code here.
So the issue might be elsewhere.

Edit: The transformed output of the compiler (transform) has the issue. So the issue is with printing, not parsing.

  • ❤️1
MoustaphaDev commented

Thanks for investigating @diesieben07!
This looks similars to #958, I'll make sure to look at this when I go through the issues next week.

  • ❤️1