🐛 BUG: breaks the <tag> to separate lines about prettier-plugin-astro

[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.