@charlietango/babel-preset-sx-prop

@charlietango/babel-preset-sx-prop

A custom version of @emotion/babel-preset-css-prop to use the JSX Pragma from @charlietango/ui

Install

yarn add @charletango/babel-preset-sx-prop

Usage

.babelrc

{
  "presets": ["@charlietango/babel-preset-sx-prop"]
}

@charlietango/babel-preset-sx-prop includes the emotion plugin. The babel-plugin-emotion 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 @charlietango/babel-preset-sx-prop is inserted after them in your babel config.

Options

Options for both babel-plugin-emotion 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.

• babel-plugin-emotion

• @babel/plugin-transform-react-jsx

You can opt into the new JSX runtimes by configuring this preset with { runtime: 'automatic' }. Keep in mind that you have to use compatible React version (>=16.14.0) to use this option and a compatible version of @emotion/core (>=10.1.0).

Examples

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

Options set to default values for demonstration purposes.