Skip to content

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

License

Notifications You must be signed in to change notification settings

charlie-tango/babel-preset-sx-prop

Repository files navigation

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published