🐛 BUG: Prettier is expanding self closing empty tags into its full form

[ni554n]

Describe the Bug

Prettier is unnecessarily turning any <svg /> like tags into <svg></svg> in a .astro file. Only default HTML elements are affected; custom ones are fine.

Steps to Reproduce

https://stackblitz.com/edit/node-dyqbs8?file=src%2Fpages%2Findex.astro,src%2Fcomponents%2FCustom.astro,package.json

Open src/pages/index.astro and run npm run format

[Princesseuh]

Hello, this is intended, we follow HTML rules in this regard, so svg cannot be a self closing tag.

Is this causing any issues in your workflow?

[ni554n]

Yes, I'm using Solid's ESLint plugin which has this self-closing-comp rule enabled. I can turn it off but I prefer it in that way.

Is there any specific reason why we are enforcing this HTML rule in JSX? Prettier itself doesn't enforce this by default.

[Princesseuh]

Yes, I'm using Solid's ESLint plugin which has this self-closing-comp rule enabled. I can turn it off but I prefer it in that way.

Is there any specific reason why we are enforcing this HTML rule in JSX? Prettier itself doesn't enforce this by default.

Astro in general does not follow JSX rules, even outside of the additional features we have, we also have HTML whitespace sensitivity, unlike JSX for instance. However, it seems like Prettier also doesn't enforce this inside HTML files, so we shouldn't be either

It's a bit unfortunate though, as it mean the plugin would allow invalid HTML 😦

[ni554n]

We should have a flag to disable this rule then. SVG elements such as path, circle, filters are naturally empty and self-closing. Here's a MDN example of path element.

[aadito123]

Yes, I'm using Solid's ESLint plugin which has this self-closing-comp rule enabled. I can turn it off but I prefer it in that way. Is there any specific reason why we are enforcing this HTML rule in JSX? Prettier itself doesn't enforce this by default.

Astro in general does not follow JSX rules, even outside of the additional features we have, we also have HTML whitespace sensitivity, unlike JSX for instance. However, it seems like Prettier also doesn't enforce this inside HTML files, so we shouldn't be either

It's a bit unfortunate though, as it mean the plugin would allow invalid HTML frowning

I think at least the self-closing SVG elements should be allowed since that would be entirely valid HTML.

[Princesseuh]

Hi everyone! Submitted a PR fixing this: https://github.com/withastro/prettier-plugin-astro/pull/328, however it is currently blocked by a compiler issue, so we'll have to wait on that. Sorry for the inconvenience!