Unstable JSX formatting

[karl]

@vjeux found a case where JSX formatting is not stable (#1671 (comment)).

<div className="yourScore">
  Your score: <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${mini.crosstable.users[user.id]}`}</span>
</div>

<div className="yourScore">
  Your score:
  {" "}
  <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${mini
    .crosstable.users[user.id]}`}</span>
</div>;

<div className="yourScore">
  Your score:
  {" "}
  <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${mini.crosstable.users[user.id]}`}</span>
</div>;

[piotrfonte]

I have the same issue where:

<ul>
  <li><code>children</code> — meant to make space for <code>StatusSymbol</code> (required)</li>
</ul>

is being turned into this:

<ul>
  <li>
    <code>children</code>
    {' '}
    —&nbsp;meant to make space for
    {' '}
    <code>StatusSymbol</code>
    {' '}
    (required)
  </li>
</ul>

[karl]

@PiotrF That formatting should be fixed up as part of #1120. With this your example code would be formatted as:

<ul>
  <li>
    <code>children</code> — meant to make space for <code>StatusSymbol</code>
    {" "}
    (required)
  </li>
</ul>

The next release of Prettier will have this fix.

[karl]

☝🏻 I have a PR that should fix the unstable formatting issue.