white space with line breaks is wrongly removed for html

[Leonidaz]

Prettier normally doesn't inline markup like the one below but the svelte prettier plugin removes all white space

html markup should remain like so

<div>
    <span>something</span>
    <span>kdkfjdk fjdkdjfkjdkfj fjkdjf</span>
</div>

but gets converted to this:

<div><span>something</span><span>kdkfjdk fjdkdjfkjdkfj fjkdjf</span></div>

When using just prettier, or for other files types (e.g. html) everything works as expected.

If inlining should be the default, could an option be added, something like "presearchWhitespace" (there is one similar for svelte compiler)?

(using the latest vscode extension, prettier as well as prettier-plugin-svelte)

[dummdidumm]

A div is not an inline element, and the whitespaces within the span is kept. The bug is that the whitespace between the two spans is not kept. Moreover, prettier is "smarter" in this regard because it recognizes your desire to keep those tags in separate lines, whereas this plugin will strictly put it in one line because it does not exceed the maximum characters allowed per line.

To fix:

• keep whitespace between the two spans. Update: This is already fixed in master, it's unreleased though.

To enhance:

• recognize desire to keep tags in separate lines

[Leonidaz]

@dummdidumm

Thanks!

Tried out the master branch, it does keep one space between inline span tags but doesn't keep the line breaks.

Essentially, the enhancement is to support htmlWhitespaceSensitivity prettier configuration option.

• "css" - Respect the default value of CSS display property. (inline vs block element)
• "strict" - Whitespaces are considered sensitive.
• "ignore" - Whitespaces are considered insensitive.

https://prettier.io/docs/en/options.html#html-whitespace-sensitivity

Also, including a link to the prettier PR that introduced support for htmlWhitespaceSensitivity for angular, vue, html: prettier/prettier#5259

[ehrencrona]

Essentially, the enhancement is to support htmlWhitespaceSensitivity prettier configuration option.

I'd say that's an unrelated issue.

Prettier will break in these situations if there's a newline after the opening tag. So

<div>
<span>bla</span></div>

formats to

<div>
  <span>bla</span>
</div>

whereas

<div><span>bla</span>
</div>

formats to

<div><span>bla</span></div>

And that's the behavior that accounts for the difference in formatting in the example given in the ticket.

[Leonidaz]

yeah, i see, you're right htmlWhitespaceSensitivity - I misunderstood this option. it only deals with white space inside the tags.

this particular issue, as @dummdidumm mentioned, has to do with recognizing block vs inline elements and selecting a formatting strategy to preserve line breaks. This also could be an option.

The lack of this single enhancement is driving our team absolutely nuts - we had to completely remove prettier from our workflow.

thank you both! really appreciate all the effort on fully supporting language tools for svelte. I can definitely see that it's not easy - so many edge cases to deal with.