Component not render correctly using only emotion CSS props

Bug Report

Given the following basic component code

// @flow
import React from 'react'
import { css } from '@emotion/core'

const base = css`
  color: red;
`

export const Button = ({ children }) => <button css={base}>{children}</button>

.babelrc

{
  "presets": ["@babel/preset-flow", "@emotion/babel-preset-css-prop"]
}

Expected behavior

It should render a button with red color on it. But instead the css is not loaded correctly

Additional context/Screenshots

[ticidesign]

I had the same problem and @mitchellhamilton one of the maintainer of Emotion helped me.

Docz appends its babel preset to the user provided config so since its babel preset includes @babel/preset-react which includes the react jsx transform which @emotion/babel-preset-css-prop also uses. So Docz’s usage of the react JSX transform is used by default.

To fix this, we’re including the JSX transform plugin in the plugins in our doczrc.js file. This works because plugins in the config take precedence over plugins in presets.

plugins: [
    createPlugin({
      modifyBabelRc(babelrc) {
        return {
          ...babelrc,
          plugins: [
            ...babelrc.plugins,
            [
              '@babel/plugin-transform-react-jsx',
              { pragma: '___EmotionJSX', pragmaFrag: 'React.Fragment' },
            ],
          ],
        };
      },
    }),
  ],

Credits to @mitchellhamilton

[nathanmsmith]

I’m getting issue with both the pragma and the babel preset – my issue seems to be that I’m using TypeScript, since it works fine for me just using .js files. If it helps, I can set up a demo repo.