Eslint-plugin-react: Spaces get condensed by --fix when they are alone in a <span>

[pbondoer]

We often need to add spacing between two elements in JSX. For example:

<GenericTextComponent type='test' />
<span>{' '}</span>
<GenericTextComponent type='other' />

Applying --fix turns the code into this:

<GenericTextComponent type='test' />
<span />
<GenericTextComponent type='other' />

which is not the same thing.

I think I've traced down what's happening. The code above gives off this error:

error  Curly braces are unnecessary here  react/jsx-curly-brace-presence

Which, when corrected (by removing the curly braces and quotes), gives off another error:

error  Empty components are self-closing  react/self-closing-comp

which --fix happily turns into the <span /> above.

Versions:

• [email protected]
• [email protected]

[ljharb]

Ouch, that’s a problem. The bug is with curly brace presence (they are necessary around whitespace) and maybe also with self-closing-comp (inline elements with a space inside aren’t necessarily empty).

These need to be fixed soon.

[ljharb]

cc @sharmilajesupaul

[sharmilajesupaul]

It looks like react/jsx-curly-brace-presence is erroneously warning on {' '} which is necessary even if children/global option is set to never. Once that's removed, react/self-closing-comp is autofixing the <span> to be self-closing.

The react/jsx-curly-brace-presence rule doesn't have a test for this case but react/self-closing-comp does.

So fixing react/jsx-curly-brace-presence will solve this issue... I think 🤔

[ljharb]

We still should fix react-self-closing-comp to not treat inline HTML elements as empty when they contain whitespace (it should autofix them to a single space, perhaps)