@emotion/babel-preset-css-prop

A babel preset to automatically enable emotion's css prop

@emotion/babel-preset-css-prop
- Install
- Usage
  - Via CLI
  - Via Node API
- Features
- Example
- Options
  - Examples

Install

yarn add @emotion/babel-preset-css-prop

Usage

Note:

This plugin is not compatible with @babel/plugin-transform-react-inline-elements. If you use both then your css prop styles won't be applied correctly.

.babelrc

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

@emotion/babel-preset-css-prop includes the emotion plugin. The @emotion/babel-plugin entry should be removed from your config and any options moved to the preset. If you use @babel/preset-react or @babel/preset-typescript ensure that @emotion/babel-preset-css-prop is inserted after them in your babel config.

{
+ "presets": [
+   [
+     "@emotion/babel-preset-css-prop",
+     {
+       "autoLabel": "dev-only",
+       "labelFormat": "[local]"
+     }
+   ]
+ ],
- "plugins": [
-   [
-     "@emotion",
-     {
-       "autoLabel": "dev-only",
-       "labelFormat": "[local]"
-     }
-   ]
- ]
}

See the options documentation for more information.

Via CLI

babel --presets @emotion/babel-preset-css-prop script.js

Via Node API

require('@babel/core').transform(code, {
  presets: ['@emotion/babel-preset-css-prop']
})

Features

This preset enables the css prop for an entire project via a single entry to the babel configuration. After adding the preset, compiled jsx code will use emotion's jsx function instead of React.createElement.

	Input	Output
Before	`<img src="avatar.png" />`	`React.createElement('img', { src: 'avatar.png' })`
After	`<img src="avatar.png" />`	`jsx('img', { src: 'avatar.png' })`

import { jsx } from '@emotion/react' is automatically added to the top of files where required.

Example

const Link = props => (
  <a
    css={{
      color: 'hotpink',
      '&:hover': {
        color: 'darkorchid'
      }
    }}
    {...props}
  />
)

Out

import { jsx as ___EmotionJSX } from '@emotion/react'

function _extends() {
  /* babel Object.assign polyfill */
}

var _ref =
  process.env.NODE_ENV === 'production'
    ? {
        name: '1fpk7dx-Link',
        styles: 'color:hotpink;&:hover{color:darkorchid;}label:Link;'
      }
    : {
        name: '1fpk7dx-Link',
        styles: 'color:hotpink;&:hover{color:darkorchid;}label:Link;',
        map:
          '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF1dG9tYXRpYy1pbXBvcnQuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUkiLCJmaWxlIjoiYXV0b21hdGljLWltcG9ydC5qcyIsInNvdXJjZXNDb250ZW50IjpbImNvbnN0IExpbmsgPSBwcm9wcyA9PiAoXG4gIDxhXG4gICAgY3NzPXt7XG4gICAgICBjb2xvcjogJ2hvdHBpbmsnLFxuICAgICAgJyY6aG92ZXInOiB7XG4gICAgICAgIGNvbG9yOiAnZGFya29yY2hpZCdcbiAgICAgIH1cbiAgICB9fVxuICAgIHsuLi5wcm9wc31cbiAgLz5cbilcbiJdfQ== */'
      }

const Link = props =>
  ___EmotionJSX(
    'a',
    _extends(
      {
        css: _ref
      },
      props
    )
  )

In addition to the custom pragma, this example includes @emotion/babel-plugin transforms that are enabled by default.

Options

Options for both @emotion/babel-plugin and @babel/plugin-transform-react-jsx are supported and will be forwarded to their respective plugin.

Refer to the plugin's documentation for full option documentation.

@emotion/babel-plugin

@babel/plugin-transform-react-jsx

Examples

{
  "presets": [
    "@emotion/babel-preset-css-prop",
    {
      "autoLabel": "dev-only",
      "labelFormat": "[local]",
      "useBuiltIns": false,
      "throwIfNamespace": true
    }
  ]
}

Options set to default values for demonstration purposes.

Current Tags

11.12.0 ... latest (5 months ago)
11.0.0-next.10 ... next (5 years ago)
11.0.0-rc.0 ... rc (4 years ago)

24 Versions

11.12.0 ... 5 months ago
11.11.0 ... 2 years ago
11.10.0 ... 2 years ago
11.2.0 ... 4 years ago
11.0.0 ... 4 years ago
10.2.1 ... 4 years ago
10.2.0 ... 4 years ago
10.1.0 ... 4 years ago
11.0.0-rc.0 ... 4 years ago
11.0.0-next.10 ... 5 years ago
10.0.27 ... 5 years ago
11.0.0-next.8 ... 5 years ago
11.0.0-next.6 ... 5 years ago
11.0.0-next.3 ... 5 years ago
11.0.0-next.0 ... 5 years ago
10.0.23 ... 5 years ago
10.0.22 ... 5 years ago
10.0.17 ... 5 years ago
10.0.14 ... 6 years ago
10.0.9 ... 6 years ago
10.0.8 ... 6 years ago
10.0.7 ... 6 years ago
10.0.6 ... 6 years ago
10.0.5 ... 6 years ago