gatsby-plugin-emotion throws an error if a component only contains fragment JSX

[17cupsofcoffee]

Description

gatsby-plugin-emotion throws an error if it encounters a component that only contains fragment syntax and no other JSX. This is due to an upstream issue in babel-preset-css-prop that has since been fixed.

Would you accept a PR to bump the dependency version? Not sure if the dependency is pinned to 10.0.5 for a specific reason or if it's just that nobody's had good reason to update yet :)

Steps to reproduce

• Create a Gatsby project from the hello world starter.
• Add gatsby-plugin-emotion to the project.
• Render the following component:

import React from "react";

export default function Component(props) {
    return <></>;
}

Expected result

The component should be rendered, and the Emotion Babel transforms should be applied.

Actual result

A ReferenceError: ___EmotionJSX is not defined is thrown.

I was able to work around the issue by manually inserting the missing pragma import into the file:

import { jsx as ___EmotionJSX } from "@emotion/core";

Or by amending the component to use React.Fragment instead of the shorthand syntax.

Environment

System:
OS: Windows 10
CPU: (12) x64 AMD Ryzen 5 1600 Six-Core Processor
Binaries:
npm: 6.7.0 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 3.7.2 - C:\Users\caven\AppData\Local\Programs\Python\Python37-32\python.EXE
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: ^2.1.9 => 2.1.9
gatsby-plugin-catch-links: ^2.0.11 => 2.0.11
gatsby-plugin-emotion: ^4.0.3 => 4.0.3
gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6
gatsby-source-filesystem: ^2.0.20 => 2.0.20
gatsby-transformer-remark: ^2.2.5 => 2.2.5

(npx gatsby info --clipboard crashes at that point for me, not sure what's happening there... let me know if you need more info!)

[wardpeet]

no real reason. I think it was just something we missed 👍

It would be awesome if you could create a PR that just adds a ^