@charlietango/babel-preset-sx-prop

Preset to consume the sx prop on all elements

Usage no npm install needed!

<script type="module">
  import charlietangoBabelPresetSxProp from 'https://cdn.skypack.dev/@charlietango/babel-preset-sx-prop';
</script>

README

@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.

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.