prefer-correctness.md

Principle: Prefer correctness over beautiful, unless opted-in.

That is, by default, prettier should not alter the semantic meaning of a file.

Examples:

• Whitespace handling in HTML
• Whitespace handling in Liquid

Whitespace handling in HTML

Whitespace in HTML is meaningful (or not) depending on the context. There's a 2000 word article on MDN that goes into the details of how it works.

As a result, pretty printing HTML that respects semantic meaning is counter-intuitive. For instance, you might expect the following:

before prettier
<span>I'm em<em>bold</em>ened by these changes!</span>

after prettier (expected/incorrect)
printWidth: -----|
<span>
    I'm em
    <em>bold</em>
    ened by these
    changes!
</span>

But it's incorrect, because the lack of whitespace between em<em>bold</em>en is meaningful. It wouldn't be if we used a div, but it is for nodes that create inline formatting contexts.

The first outputs

• I'm emboldened by these changes!

The second outputs outputs

• I'm em bold ened by these changes!

The correct solution maintains the lack of whitespace. For HTML nodes, the only solution available is to borrow the opening or closing tag markers of the surrounding nodes. Like this:

before prettier
<span>I'm em<em>bold</em>ened by these changes!</span>

after prettier (correct)
printWidth: ----|
<span
  >I'm em<em
    >bold</em
  >ened by these
  changes!</span
>

Which looks funny because the printWidth is so small, but it outputs correctly (you can view source to verify):

• I'm emboldened by these changes!

For a more in-depth discussion about how we handle this, see Whitespace Handling