Emotion 10 + @babel/plugin-transform-react-inline-elements

[GuillaumeCisco]

• emotion version: 10.0.6
• react version: 16.7.0

What you did:

We just experimented strange behaviors with the new emotion 10 css prop and @babel/plugin-transform-react-inline-elements
And it led us to others very weird behaviors when testing

What happened:

Mystic things.

Reproduction:

Here a few codesandbox examples (In all examples /** @jsx jsx */ is used):

• Using create-react-app, no overrided .babelrc, with App as a function
  https://codesandbox.io/s/w7ok10lq25
  It test several examples with import {css} from 'emotion', import {css} from '@emotion/core', css prop and className prop.
  I described what should happen in each test. Feel free to correct me.

• Using create-react-app, no overrided .babelrc, with App as a React Component
  https://codesandbox.io/s/ox254ppyny
  Just click the button and see the magic happens... I absolutely do not know what is going on. But it is not my initial issue.

• Using parcel, with overrided .babelrc (added @babel/plugin-transform-react-inline-elements), with App as a React Component
  https://codesandbox.io/s/73mw0rnm46
  As you can see in this example, some elements are totally different with the last one.
  This is my real issue. I suspect the jsx pragma making conflicts with @babel/plugin-transform-react-inline-elements. As per definition: https://babeljs.io/docs/en/babel-plugin-transform-react-inline-elements

<Baz foo="bar" key="1"></Baz>;

|
V

babelHelpers.jsx(Baz, {
  foo: "bar"
}, "1");

/**
 * Instead of
 *
 * React.createElement(Baz, {
 *   foo: "bar",
 *   key: "1",
 * });
 */

• Using parcel, with no overrided .babelrc, with App as a React Component
  https://codesandbox.io/s/l836814j7
  Looks like the exact same thing as the second codesandbox example, demonstrating incoherences with
  @babel/plugin-transform-react-inline-elements

Problem description:
Looks like there are several issues there.
But let's concentrate to the one I'm facing i.e using @babel/plugin-transform-react-inline-elements with emotion 10. Is jsx pargma (or @emotion/babel-preset-css-prop) breaking things?

Suggested solution:
For now we will not use @babel/plugin-transform-react-inline-elements but it is not what we'd want.

[emmatown]

We don't support @babel/plugin-transform-react-inline-elements.

[GuillaumeCisco]

Ok thank you for this information. What a pity not to support a plugin enhancement without explaining why. Especially that emotion 9 supported it out of the box.
I don't want to be mean but why are you closing this issue?

A lot of problems are described here that could help us fix them and not frustrate the users.
You can see the object object issue, the state update issue.

Can you reopen this issue and just tell me if what I show regarding what should happen is correct?

Thank you,

[GuillaumeCisco]

Linking #348 for better explanation

[HyperSprite]

If anyone is seeing errors with Module parse failed: Unexpected keyword 'var' and var _ ref = ___ Emotion JSX( check your babel plugins for @babel/plugin-transform-react-inline-elements, my emotion 11 setup was working fine until one day it wasn't. Removing this plugin made prod builds posible again.