Create React App + craco + @emotion/babel-preset-css-prop

• emotion version: 10.0.5
• react version: 16.6.3

Relevant code:

<div css={{color: 'red'}}>hello</div>

What you did:

Use craco with create-react-app. craco is the new version of create-react-app-rewired

# craco.config.js

module.exports = {
  babel: {
    presets: ['@emotion/babel-preset-css-prop']
  }
}

What happened:

It showed in DOM as <div css=[Object]>

Reproduction:

Problem description:

Preset @emotion/babel-preset-css-prop does not work. I still need to add /** @jsx jsx/, import { jsx } from '@emotion/core' to get it work.

Suggested solution:

[PutziSan]

TL;DR it works using this craco-config:

// craco.config.js
const emotionPresetOptions = {};

const emotionBabelPreset = require("@emotion/babel-preset-css-prop").default(
  undefined,
  emotionPresetOptions
);

module.exports = {
  babel: {
    plugins: [
      ...emotionBabelPreset.plugins
      // your other plugins
    ]
  }
};

Using the preset directly with craco does not work, because craco inserts the presets from craco.config.js before the presets from CRA.

CRA uses a preset for the babel configuration and the order in which babel presets/plugins executes is:

• Plugins run before Presets.
• Plugin ordering is first to last.
• Preset ordering is reversed (last to first).

The plugins of @emotion/babel-preset-css-prop must be executed before the plugins of CRA are executed, otherwise the JSX code will have been transformed to React.createElement before emotions plugin had a chance to do so.

For these reasons it works if we set the plugins directly instead of using the preset. Happy coding 😄

[ruanodendaal]

This will not work with ‘Create React App’ as per the documentation: https://emotion.sh/docs/css-prop#babel-preset

You need to use the JSX Pragma instead: https://emotion.sh/docs/css-prop#jsx-pragma