Nightmarish Pawnshop Mystic

    @emotion/babel-preset-css-prop

    11.2.0 • Public • Published

    @emotion/babel-preset-css-prop

    A Babel preset to automatically enable Emotion's css prop when using the classic JSX runtime. If you want to use the new JSX runtimes please do not use this preset but rather just include our @emotion/babel-plugin directly and follow instructions for configuring the new JSX runtimes here.

    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

    In

    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 JSX factory, 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.

    Examples

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

    Options set to default values for demonstration purposes.

    Keywords

    none

    Install

    npm i @emotion/babel-preset-css-prop

    DownloadsWeekly Downloads

    215,851

    Version

    11.2.0

    License

    MIT

    Unpacked Size

    27.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • tkh44
    • mitchellhamilton
    • emotion-release-bot
    • andarist