Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
1 task
poximy opened this issue Jan 22, 2024 · 5 comments
Open
1 task

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

poximy opened this issue Jan 22, 2024 · 5 comments
Labels
- P3: minor bug An edge case that only affects very specific usage (priority)

Comments

@poximy
Copy link

poximy commented Jan 22, 2024 •
edited

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.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Jan 22, 2024
@poximy poximy changed the title Body classes are removed when dynamic tags are added in <head> only when JSX Comment Pressent JSX Comment causing <body> to render no class/attributes Jan 22, 2024
@ematipico
Copy link
Member

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

@ematipico ematipico added needs response needs repro Issue needs a reproduction and removed needs triage Issue needs to be triaged labels Jan 22, 2024
@github-actions GitHub Actions
Copy link
Contributor

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.

@Princesseuh Princesseuh added - P3: minor bug An edge case that only affects very specific usage (priority) and removed needs response needs repro Issue needs a reproduction labels Jan 22, 2024
@Princesseuh Princesseuh transferred this issue from withastro/astro Jan 22, 2024
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Jan 22, 2024
@MoustaphaDev MoustaphaDev removed the needs triage Issue needs to be triaged label Jan 22, 2024
@poximy
Copy link
Author

poximy commented Jan 24, 2024

@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.

@ecasallas07

This comment was marked as spam.

Sign in to view
@Brayan-724

This comment was marked as off-topic.

Sign in to view
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
- P3: minor bug An edge case that only affects very specific usage (priority)
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@ematipico @Princesseuh @Brayan-724 @poximy @MoustaphaDev @ecasallas07