🐛 BUG: breaks the <tag> to separate lines

[teinett]

Describe the Bug

The bug: code <svg viewBox="0 0 800 250" class="_hero-heading_1csbc_7"><defs>...</defs></svg> became ugly:

<svg viewBox="0 0 800 250" class="_hero-heading_1csbc_7"
    ><defs
        >
        ...
        ></defs
    ></svg
>

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:

/** @type {import("prettier").Config} */
export default {
    plugins: ['prettier-plugin-astro'],
    overrides: [
        {
            files: '*.astro',
            options: {
                parser: 'astro',
            },
        },
    ],
};

Steps to Reproduce

I use this code in AstroJS project: src/pages/index.astro

Code:

<svg viewBox="0 0 800 250" class="_hero-heading_1csbc_7"><defs><g id="text-group" class="_text-group_1csbc_11"><text x="50%" y="80">learn. build. grow.</text><text x="50%" y="190" class="_bigger_1csbc_21">together.</text></g></defs><rect class="_o-filler_1csbc_48" x="450" y="58" width="8" height="8"></rect><rect class="_o-filler2_1csbc_52" x="615" y="54" width="7" height="18"></rect><rect class="_o-filler3_1csbc_56" x="535" y="54" width="7" height="18"></rect><use id="gradient-stroke" class="_gradient-stroke_1csbc_42" href="#text-group"></use><use id="text" class="_text_1csbc_11" href="#text-group"></use></svg>

Resulted code in VS Code after Prettier:

<svg viewBox="0 0 800 250" class="_hero-heading_1csbc_7"
    ><defs
        ><g id="text-group" class="_text-group_1csbc_11"
            ><text x="50%" y="80">learn. build. grow.</text><text
                x="50%"
                y="190"
                class="_bigger_1csbc_21">together.</text
            ></g
        ></defs
    ><rect class="_o-filler_1csbc_48" x="450" y="58" width="8" height="8"
    ></rect><rect
        class="_o-filler2_1csbc_52"
        x="615"
        y="54"
        width="7"
        height="18"></rect><rect
        class="_o-filler3_1csbc_56"
        x="535"
        y="54"
        width="7"
        height="18"></rect><use
        id="gradient-stroke"
        class="_gradient-stroke_1csbc_42"
        href="#text-group"></use><use
        id="text"
        class="_text_1csbc_11"
        href="#text-group"></use></svg
>

Expected result:

<svg viewBox="0 0 800 250" class="_hero-heading_1csbc_7">
  <defs>
    <g id="text-group" class="_text-group_1csbc_11">
      <text x="50%" y="80">
        learn. build. grow.
      </text>
      <text x="50%" y="190" class="_bigger_1csbc_21">
        together.
      </text>
    </g>
  </defs>
  <rect class="_o-filler_1csbc_48" x="450" y="58" width="8" height="8"></rect>
  <rect class="_o-filler2_1csbc_52" x="615" y="54" width="7" height="18"></rect>
  <rect class="_o-filler3_1csbc_56" x="535" y="54" width="7" height="18"></rect>
  <use
    id="gradient-stroke"
    class="_gradient-stroke_1csbc_42"
    href="#text-group"
  ></use>
  <use id="text" class="_text_1csbc_11" href="#text-group"></use>
</svg>;

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:

["INFO" - 14:28:22] Formatting completed in 20ms.
["INFO" - 14:31:00] Using config file at '/Users/teine/Development/landing-brasil-docs/.prettierrc.mjs'

[Princesseuh]

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.

[khalibloo]

It's not just svg elements actually.

[Princesseuh]

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

[khalibloo]

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

[lucperkins]

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.

[Princesseuh]

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.

[swernerx]

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>

[Princesseuh]

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.