Weird caret formatting in html template literal

[skeggse]

Prettier 2.0.4
Playground link

--parser babel
--print-width 100

Input:

const message = html`
<p>
<span>Well wouldja lookit that - I mis-labeled the printer! <img alt="🤦" src="u1f926.png" /></span>
</p>
`;

Output:

const message = html`
  <p>
    <span
      >Well wouldja lookit that - I mis-labeled the printer! <img alt="🤦" src="u1f926.png"
    /></span>
  </p>
`;

Expected behavior:

const message = html`
  <p>
    <span>
      Well wouldja lookit that - I mis-labeled the printer!
      <img alt="🤦" src="u1f926.png" />
    </span>
  </p>
`;

[skeggse]

Dupe of #8302, oops!

[thorn0]

Not really a dupe. If you need whitespace before "Well..." and after img, add it manually. Prettier won't do it because it's unsafe.

[thorn0]

After adding whitespace and setting printWidth to 80, we get the expected result:

Prettier 2.0.5
Playground link

--parser babel

Input:

const message = html`
<p>
<span> Well wouldja lookit that - I mis-labeled the printer! <img alt="🤦" src="u1f926.png" /> </span>
</p>
`;

Output:

const message = html`
  <p>
    <span>
      Well wouldja lookit that - I mis-labeled the printer!
      <img alt="🤦" src="u1f926.png" />
    </span>
  </p>
`;