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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

馃悰 BUG: Header and Footer components are being lowercased #75

Closed
JuanM04 opened this issue Nov 24, 2021 · 2 comments 路 Fixed by #107
Closed

馃悰 BUG: Header and Footer components are being lowercased #75

JuanM04 opened this issue Nov 24, 2021 · 2 comments 路 Fixed by #107

Comments

@JuanM04
Copy link

JuanM04 commented Nov 24, 2021

Describe the Bug

When I use a component <Header /> or <Footer /> (maybe happens with more components, but I'm not aware of that) they are converted to <header /> and <footer /> HTML elements when they shouldn't

Steps to Reproduce

  1. npm init astro using template minimal
  2. Install prettier and prettier-plugin-astro
  3. Create two components: Header.astro and Footer.astro
  4. Replace your index.astro with this:
---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---

<html lang="en">
  <body>
    <Header />

    <h1>Welcome to <a href="https://astro.build/">Astro</a></h1>

    <Footer />
  </body>
</html>
  1. Run prettier -w . (maybe you'll have to run it twice)
  2. You'll see the components <Header /> to be <header /> (and the same with Footer)
@antonyfaris
Copy link
Member

I think I know what is causing this, I will take look. Thanks for the report.

@denengineer
Copy link

denengineer commented Dec 14, 2021 •
edited

Also the same with Nav and Button. I guess with all native HTML tags clashing with component names.

Edited: when I add `` to the component anywhere (for example <div class={`h-10`} />) it works fine tho, so could be used as a workaround for now @JuanM04

@antonyfaris antonyfaris mentioned this issue Jan 12, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Format html using only the plugin itself antonyfaris/prettier-plugin-astro
3 participants
@antonyfaris @JuanM04 @denengineer