babel-plugin-emotion

Babel plugin for the minification and optimization of emotion styles.

babel-plugin-emotion is highly recommended, but not required in version 8 and above of emotion.

Features

Example

In

const myStyles = css`
  font-size: 20px;
  @media (min-width: 420px) {
    color: blue;
    ${css`
      width: 96px;
      height: 96px;
    `};
    line-height: 26px;
  }
  background: green;
  ${{ backgroundColor: 'hotpink' }};
`

Out

const myStyles = /* #__PURE__ */ css(
  'font-size:20px;@media(min-width:420px){color:blue;',
  /* #__PURE__ */ css('width:96px;height:96px;'),
  ';line-height:26px;}background:green;',
  { backgroundColor: 'hotpink' },
  ';'
)

Installation

yarn add --dev babel-plugin-emotion

or if you prefer npm

npm install --save-dev babel-plugin-emotion

Usage

Via .babelrc (Recommended)

.babelrc

Without options:

{
  "plugins": ["emotion"]
}

With options:

Defaults Shown

{
  "plugins": [
    [
      "emotion",
      {
        "hoist": false,
        "sourceMap": false,
        "autoLabel": false,
        "extractStatic": false,
        "importedNames": {
          "styled": "styled",
          "css": "css",
          "keyframes": "keyframes",
          "injectGlobal": "injectGlobal",
          "merge": "merge"
        }
      }
    ]
  ]
}

Recommended Setup

Use Babel's env property

.babelrc

{
  "env": {
    "production": {
      "plugins": [["emotion", { "hoist": true }]]
    },
    "development": {
      "plugins": [
        ["emotion", { "sourceMap": true, "autoLabel": true }]
      ]
    }
  }
}

Via CLI

babel --plugins babel-plugin-emotion script.js

Via Node API

require('@babel/core').transform('code', {
  plugins: ['babel-plugin-emotion']
})

Options

hoist

boolean, defaults to false.

This option enables the following:

• Any argument supplied to css or styled is hoisted.

By hoisting the argument, or assigning the value to a variable, emotion is able to leverage the use of a WeakMapcache to increase performance. Users of object styles with css prop will benefit the most from enabling this option.

In

const Sample = () => <div css={{ background: 'brown' }} />

Out

var _css = require('emotion').css;
var _ref = { background: 'brown' };

const Sample = () => <div className={_css(_ref)} />;

sourceMap

boolean, defaults to false.

This option enables the following:

• Injected source maps for use in browser dev tools

Documentation

autoLabel

boolean, defaults to false.

This option enables the following:

• Automatically adds the label property to styles so that class names generated by css or styled include the name of the variable the result is assigned to.

css

In

const brownStyles = css({ color: 'brown' })

Out

const brownStyles = /*#__PURE__*/ css({ color: 'blue' }, 'label:brownStyles;')

brownStyles's value would be css-1q8eu9e-brownStyles

styled

In

const Profile = () => {
  const H1 = styled.h1({
    borderRadius: '50%',
    transition: 'transform 400ms ease-in-out',
    boxSizing: 'border-box',
    display: 'flex',
    ':hover': {
      transform: 'scale(1.2)'
    }
  })
}

Out

const Profile = () => {
  const H1 = /*#__PURE__*/ styled('h1', {
    label: 'H1'
  })({
    borderRadius: '50%',
    transition: 'transform 400ms ease-in-out',
    boxSizing: 'border-box',
    display: 'flex',
    ':hover': {
      transform: 'scale(1.2)'
    }
  })
}

H1's class name attribute would be css-13djram-H1

extractStatic

boolean, defaults to false.

This option enables the following:

• Extract static styles into CSS files.

Documentation

importedNames

object, defaults to

{
  "styled": "styled",
  "css": "css",
  "keyframes": "keyframes",
  "injectGlobal": "injectGlobal",
  "merge": "merge"
}

This option enables the following:

• Configurable import names

Documentation

instances

Array<string>, defaults to

['emotion', 'react-emotion', 'preact-emotion']

This option allows babel-plugin-emotion to know which imports to treat as emotion imports and transform as such. This option is only required if you use a custom instance of emotion created with create-emotion or you're importing emotion from somewhere other than the paths above. Relative paths are resolved relative to process.cwd()(the current working directory).

Documentation

primaryInstance

string, defaults to

'emotion'

This option allows babel-plugin-emotion to know where to import emotion from when it needs to import emotion. Currently this is only used for the css prop to import css and merge but it could be used for other purposes in the future so it's recommend to make sure that this instance exports everything returned from createEmotion, an up-to-date example of this can be found in the emotion package's source.

Documentation

Babel Macros

Instead of using babel-plugin-emotion, you can use emotion with babel-plugin-macros. Add babel-plugin-macros to your babel config and import whatever you want from emotion but add /macro to the end. Currently every API except for the css prop is supported by the macro.

import styled from 'react-emotion/macro'
import {
  css,
  keyframes,
  injectGlobal,
  flush,
  hydrate
} from 'emotion/macro'

create-react-app issue discussing macros.