Don't add space adjacent to html tags in some situations, even when ingonring whitespace sensitivity

[karptonite]

Prettier 1.15.2
Playground link

# Options (if any):
--html-whitespace-sensitivity ignore

Input:

<span foo="bar" baz="zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz">foo</span>.

Output:

<span foo="bar" baz="zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz">
  foo
</span>
.

Expected behavior:

<span foo="bar" baz="zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz">
  foo
</span>.

This may be related to #5449 and #5439, but I think it may be distinct. The basic issue here is that even when "ignoring" whitespace, I believe prettier shouldn't be adding whitespace to the outer "edges" of elements. That means that adding whitespace on the inside "edge" of an element, say after <span> or before </span>, is OK, but adding whitespace just outside of an element can be an issue. As it is now, there is now way to both ignore whitespace on the inside edge of an element, but keep it on the outside.

I'd argue that adding the space before the period in this example is essentially equivalent to adding a space in the middle of a word--this is whitespace that will always be important.

This is particularly relevant for Angular users, which by default strips whitespace from code in most cases.

[thorn0]

means that adding whitespace on the inside "edge" of an element, say after or before , is OK, but adding whitespace just outside of an element can be an issue.

How exactly this <span>foo </span>. is more OK for you than this <span>foo</span> .? Can you elaborate?

this is whitespace that will always be important

It is not really clear why you think it is more special than the white space before </span>. It is important in inline context only and only if the preceding inline element doesn't end in another whitespace. E.g. if display: block is specified for that span, this white space will be ignored by browsers. By default (--html-whitespace-sensitivity css), Prettier hopes that there is no such tricky CSS, but if there is, --html-whitespace-sensitivity strict should be used.

I'm not sure what the use case for --html-whitespace-sensitivity ignore even is, but using this mode you're basically saying to Prettier that you don't care about white spaces. If you do care, why use this mode?

This is particularly relevant for Angular users, which by default strips whitespace from code in most cases.

Interesting. How exactly Angular Compiler decides which white spaces can be removed?

[thorn0]

So, Angular by default simply removes white-space-only text nodes: demo, src

This behavior can be changed by setting preserveWhitespaces to true:

1. globally (app-wide), separately for JIT and AOT at that
2. component-wide: pass preserveWhitespaces: true to the Component decorator
3. element-wide, in the template: use the ngPreserveWhitespaces attribute

Now I see why Angular developers can have different expectations regarding white space formatting than the rest of those who write HTML.

[karptonite]

Wow, I wast totally wrong, actually. it turns out that

<span foo="bar" baz="zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz">
  foo
</span>.

also inserts a space after foo with Angular set to not preserve whitespaces.
Under the circumstances, that means that my original point is wrong. There may be some better setting in prettier for Angular, but I'm not sure what it would be.

Hmm... That means I'll have to reconsider using the ignore whitespace setting, though.

[thorn0]

Why don't the default settings work for you?

[karptonite]

@thorn0 only that it ends up looking kind of ugly in some cases. I can open another issue with a concrete example of where I think it ends up looking ugly.

[thorn0]

Why not? Go ahead.