withastro/compiler

JSX Comment causing <body> to render no class/attributes

poximy opened this issue · 5 comments

poximy commented

Astro Info

Astro                    v4.2.1
Node                     v20.10.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind

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

Firefox, Safari

Describe the Bug

This code will Render perfectly without the JSX comment on a .astro

---
const title = "astro"
---

{/* This comment will cause a bug */}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
  </head>
  <body class="text-red-500">
    <p>Astro</p>
  </body>
</html>

<style>
.text-red-500 {
  color: red;
}
</style>

When a comment (JSX comment) is present after the Component Script and before the start of any html tag, when rendered in dev and preview mode. For its class attribute and anything in side it will be removed. But if {title} is removed and <title>Astro</title> is in its place this will render properly. Short hand attributes like <meta {charset} /> will work perfectly.

A solution I found was just to use a simple html comment, or use a JSX comment and wrap the title in a Fragment:

<Fragment set:html={`<title>${title}</title>` />

What's the expected result?

This is how it should be rendered regardless of a JSX comment position:

<body class="text-red-500">

Not:

<body>

Link to Minimal Reproducible Example

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

Participation

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

@poximy I opened the reproduction, and I can't see any error. What should I do to reproduce the issue?

github-actions commented

Hello @poximy. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

poximy commented

@ematipico Notice how line 13 has a class (text-red-500), and at line 19 it's declared inside the style tag. Well you should see in the output "Astro" in red. But this does not happen. When you remove the comment on line 5 and refresh. The text will now be in red.

Brayan-724 commented

👀

  • 😄1
  • 👀1