Not working with Fragment shorthand

[redbmk]

When using React's short Fragment syntax (<>/</>), some styling breaks. It seems fine unless you put something in a {} block without being wrapped in a jsx element.

import React, { Fragment } from "react";

export const ThisWorks = () => (
  <>
    <div>
      <span>Hello</span>
    </div>
  </>
);

export const SoDoesThis = ({ someProps }) => (
  <>
    <div>
      <span>Hello</span>
    </div>
    <div>
      <span>World</span>
    </div>
  </>
);

export const ThisDoesNot = ({ shouldSayHi }) => (
  <>
    {shouldSayHi && (
      <div>
        <span>Hello</span>
      </div>
    )}
    <div>
      <span>World</span>
    </div>
  </>
);

export const ButThisDoes = ({ shouldSayHi }) => (
  <Fragment>
    {shouldSayHi && (
      <div>
        <span>Hello</span>
      </div>
    )}
    <div>
      <span>World</span>
    </div>
  </Fragment>
);

[chemzqm]

Yep, it's not supported yet.

[redbmk]

You rock! ❤️

[redbmk]

@chemzqm This latest change fixed the fragment shorthand, but actually broke some basic javascript comparison syntax 😱 :

before

after

[chemzqm]

Fixed

[redbmk]

Awesome, thanks! Looks great!