Open teinett opened 9 months ago
Hmm, we might be handling SVGs elements wrongly. Not sure if they should all be treated as block elements, will have to investigate! Thank you for creating an issue for this.
It's not just svg elements actually.
span
is an inline element, as such this is expected behavior, putting the content in a different manner would result in spaces in your page. You can reproduce similar behavior in HTML files
Interesting. So that's the rationale behind that. I've only ever observed it in astro since most of my projects use jsx. It still looks very odd to me, and triggers my OCD, but glad to know it's not a bug. Thanks
I'm having a similar issue (version 0.12.3).
Before formatting:
<span class:list={["uppercase", dark ? "text-ds-white" : "text-ds-night-sky"]}>by <a href={personUrl(author)} class="hover:text-ds-sky-blue transition-colors duration-hover">{author}</a></span>
After formatting:
<span class:list={["uppercase", dark ? "text-ds-white" : "text-ds-night-sky"]}
>by <a
href={personUrl(author)}
class="hover:text-ds-sky-blue transition-colors duration-hover">{author}</a
></span
>
@Princesseuh As you can see from the above, it seems to extend beyond svg
elements.
I'm having a similar issue (version 0.12.3).
Before formatting:
<span class:list={["uppercase", dark ? "text-ds-white" : "text-ds-night-sky"]}>by <a href={personUrl(author)} class="hover:text-ds-sky-blue transition-colors duration-hover">{author}</a></span>
After formatting:
<span class:list={["uppercase", dark ? "text-ds-white" : "text-ds-night-sky"]} >by <a href={personUrl(author)} class="hover:text-ds-sky-blue transition-colors duration-hover">{author}</a ></span >
@Princesseuh As you can see from the above, it seems to extend beyond
svg
elements.
As replied right before your comment, this seems like expected behavior to me, with span
being an inline element.
This is really kind of surprising. I got this after formatting inside my new project and felt there might be something wrongly configured first:
<p>
Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz: <em
>ausstehend</em
>
</p>
This is also the same thing as the previous comments, em
is an inline element and so it needs to hugs its children. Though, Prettier format it a bit differently in HTML files in this specific case because the whitespace before can be converted to a new line, which we don't currently do. Nonetheless, at this time, this result is expected.
This issue only affects SVGs elements, everything else are another, unrelated issues. HTML, Astro and Svelte are whitespace sensitive languages, unlike JSX. So the formatting has to and will be different than JSX.
Describe the Bug
The bug: code
<svg viewBox="0 0 800 250" class="_hero-heading_1csbc_7"><defs>...</defs></svg>
became ugly:Screenshot:
VS Code version: Version: 1.84.2 (Universal) Commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e Date: 2023-11-09T10:52:33.687Z Electron: 25.9.2 ElectronBuildId: 24603566 Chromium: 114.0.5735.289 Node.js: 18.15.0 V8: 11.4.183.29-electron.0 OS: Darwin arm64 23.1.0
Astro VS Code Extension version: 2.5.2 Prettier VS Code Extension version: 10.1.0
npm package.json: "prettier-plugin-astro": "^0.12.2"
File
.prettierrc.mjs
:Steps to Reproduce
I use this code in AstroJS project:
src/pages/index.astro
Code:
Resulted code in VS Code after Prettier:
Expected result:
In the same project I create page.html, and the code is formatted correctly.
Tried the code in https://prettier.io/playground/: yes, the formatting is perfect.
Prettier extension log: