BUG 🐛: <Footer> gets rewritten to <footer> + all other case insensitive html tag collisions

[borisv]

When an imported component has a tag reference name that collides with one of the standard tag names in HTML - like for instance <Footer /> - the plugin resets it to <footer />. Thus being lowercase then it won't get rendered by astro and the component is missing in the output.

I don't like the clunkiness of having to keep a complete nomenclature in mind to avoid collisions like these.

Also the compiler doesn't complain - how could it be aware? - so the then missing component gets dropped silently.

[jasikpark]

Yup there's already a test for this at

• https://github.com/snowpackjs/prettier-plugin-astro/blob/64f677bb7b7a60fb4aafa60cf6ab4f6047189fc8/test/astro-prettier.test.mjs#L106
• https://github.com/snowpackjs/prettier-plugin-astro/blob/main/test/fixtures/in/preserve-tag-case.astro
• https://github.com/snowpackjs/prettier-plugin-astro/blob/main/test/fixtures/out/preserve-tag-case.astro

but thanks for pointing it out! I still need to look into the parser to see why this is happening D:

[togami2864]

I'm working on this issue now.
I know what's causing it.
https://github.com/snowpackjs/prettier-plugin-astro/blob/d497577881283551dc09126f28e7aa924b5dcdb4/src/printer.js#L108-L112

Inline components without '{' are considered not to be jsx.
The following case can be solved by commenting on the above part. (Of course, the modification is needed to deal with more complex cases.)

---
import { Footer } from 'Footer'
---

<Footer></Footer>
<footer></footer>

and run

$ prettier -w ./<Filename>

another problem

I used VScode and executed the above command in the terminal. It worked as expected.
But, the code formatted by Format On Save in vscode, I got the following.

---
import { Footer } from 'Footer'
---

<footer></footer>
<footer></footer>

Does anyone else have the same problem?

reproduction

1 npm init astro
2 npm i prettier
3 npm i github:snowpackjs/prettier-plugin-astro
4 comment out L 108 ~ L 112 in printer.js in prettier-plugin-astro
5 run formatting executed by Format On Save