A custom version of @emotion/babel-preset-css-prop to use the JSX Pragma from @charlietango/ui
yarn add @charletango/babel-preset-sx-prop
.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 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
).
{
"presets": [
"@emotion/babel-preset-css-prop",
{
"autoLabel": true,
"labelFormat": "[local]",
"useBuiltIns": false,
"throwIfNamespace": true
}
]
}
Options set to default values for demonstration purposes.