Babel Macros

Create React App recently added support for Babel Macros which makes it possible to run Babel transforms without changing a Babel config.

All of Emotion’s Babel Macros are available by adding /macro to the end of the import you’d normally use. (assuming you’re using Create React App v2 or you’ve added babel-plugin-macros to your .babelrc) For example, to use the macro for styled, use @emotion/styled/macro.

import styled from '@emotion/styled/macro'
import { jsx, css, Global, keyframes } from '@emotion/react/macro'
import { css, keyframes, injectGlobal } from '@emotion/css/macro'

Note

There are some optimisations which aren’t possible with Babel Macros, so if it’s possible, we still recommend using @emotion/babel-plugin