diff --git a/.changeset/weak-pears-design.md b/.changeset/weak-pears-design.md
new file mode 100644
index 000000000..2c9657104
--- /dev/null
+++ b/.changeset/weak-pears-design.md
@@ -0,0 +1,5 @@
+---
+'@emotion/babel-preset-css-prop': major
+---
+
+Removed `runtime` option that was introduced to this preset and deprecated shortly after that. If you want to configure `runtime: "automatic"`, replace `@emotion/babel-preset-css-prop` with `@babel/preset-react` and `@emotion/babel-plugin`. You can find out how to configure things properly here: https://emotion.sh/docs/css-prop#babel-preset
diff --git a/babel.config.js b/babel.config.js
index 3656dc20f..05e09be18 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -34,7 +34,9 @@ module.exports = api => {
filename &&
isTestFile(filename) &&
filename.includes('automatic-runtime'),
- presets: [[emotionDevPreset, { runtime: 'automatic' }]]
+ presets: [
+ [emotionDevPreset, { runtime: 'automatic', useEmotionPlugin: true }]
+ ]
},
{
test: filename =>
@@ -42,7 +44,10 @@ module.exports = api => {
isTestFile(filename) &&
filename.includes('automatic-dev-runtime'),
presets: [
- [emotionDevPreset, { runtime: 'automatic', development: true }]
+ [
+ emotionDevPreset,
+ { runtime: 'automatic', development: true, useEmotionPlugin: true }
+ ]
]
}
]
diff --git a/packages/babel-preset-css-prop/__tests__/__fixtures__/fragment.js b/packages/babel-preset-css-prop/__tests__/__fixtures__/fragment.js
deleted file mode 100644
index 8cce98778..000000000
--- a/packages/babel-preset-css-prop/__tests__/__fixtures__/fragment.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export let Button = ({ loading, ...props }) => {
- return (
- <>
-
- {loading && {'Loading...'}}
- >
- )
-}
diff --git a/packages/babel-preset-css-prop/__tests__/__fixtures__/key-after-spread.js b/packages/babel-preset-css-prop/__tests__/__fixtures__/key-after-spread.js
deleted file mode 100644
index 8881d1211..000000000
--- a/packages/babel-preset-css-prop/__tests__/__fixtures__/key-after-spread.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export let Buttons = ({ buttons }) => {
- return (
-
- {buttons.map(({ id, label, ...rest }) => (
-
- ))}
-
- )
-}
diff --git a/packages/babel-preset-css-prop/__tests__/__fixtures__/no-static-children.js b/packages/babel-preset-css-prop/__tests__/__fixtures__/no-static-children.js
deleted file mode 100644
index 32562407f..000000000
--- a/packages/babel-preset-css-prop/__tests__/__fixtures__/no-static-children.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export let Button = props => {
- return (
-
- )
-}
diff --git a/packages/babel-preset-css-prop/__tests__/__fixtures__/static-children.js b/packages/babel-preset-css-prop/__tests__/__fixtures__/static-children.js
deleted file mode 100644
index fa7a52a1c..000000000
--- a/packages/babel-preset-css-prop/__tests__/__fixtures__/static-children.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export let Button = () => {
- return (
-
- )
-}
diff --git a/packages/babel-preset-css-prop/__tests__/__snapshots__/automatic-runtime-dev.js.snap b/packages/babel-preset-css-prop/__tests__/__snapshots__/automatic-runtime-dev.js.snap
deleted file mode 100644
index 4682c948d..000000000
--- a/packages/babel-preset-css-prop/__tests__/__snapshots__/automatic-runtime-dev.js.snap
+++ /dev/null
@@ -1,233 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`automatic runtime dev array-css-prop 1`] = `
-"import * as React from 'react'
-
-const Component = props =>
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsxDEV as _jsxDEV } from \\"@emotion/react/jsx-dev-runtime\\";
-var _jsxFileName = \\"/test/path/to/some/file.js\\";
-import * as React from 'react';
-var _ref = {
- name: \\"v98kxt\\",
- styles: \\"color:green\\"
-};
-
-const Component = props => _jsxDEV(\\"div\\", {
- css: _ref,
- ...props
-}, void 0, false, {
- fileName: _jsxFileName,
- lineNumber: 3,
- columnNumber: 28
-}, this);"
-`;
-
-exports[`automatic runtime dev fragment 1`] = `
-"export let Button = ({ loading, ...props }) => {
- return (
- <>
-
- {loading && {'Loading...'}}
- >
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsxDEV as _jsxDEV } from \\"@emotion/react/jsx-dev-runtime\\";
-import { Fragment as _Fragment } from \\"@emotion/react/jsx-dev-runtime\\";
-var _jsxFileName = \\"/test/path/to/some/file.js\\";
-var _ref = {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-};
-export let Button = ({
- loading,
- ...props
-}) => {
- return _jsxDEV(_Fragment, {
- children: [_jsxDEV(\\"button\\", {
- css: _ref,
- ...props
- }, void 0, false, {
- fileName: _jsxFileName,
- lineNumber: 4,
- columnNumber: 7
- }, this), loading && _jsxDEV(\\"span\\", {
- children: 'Loading...'
- }, void 0, false, {
- fileName: _jsxFileName,
- lineNumber: 5,
- columnNumber: 19
- }, this)]
- }, void 0, true);
-};"
-`;
-
-exports[`automatic runtime dev index 1`] = `
-"import * as React from 'react'
-
-export let Button = props => {
- return (
- <>
-
- >
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsxDEV as _jsxDEV } from \\"@emotion/react/jsx-dev-runtime\\";
-import { Fragment as _Fragment } from \\"@emotion/react/jsx-dev-runtime\\";
-var _jsxFileName = \\"/test/path/to/some/file.js\\";
-import * as React from 'react';
-var _ref = {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-};
-export let Button = props => {
- return _jsxDEV(_Fragment, {
- children: _jsxDEV(\\"button\\", {
- css: _ref,
- ...props
- }, void 0, false, {
- fileName: _jsxFileName,
- lineNumber: 6,
- columnNumber: 7
- }, this)
- }, void 0, false);
-};"
-`;
-
-exports[`automatic runtime dev key-after-spread 1`] = `
-"export let Buttons = ({ buttons }) => {
- return (
-
- {buttons.map(({ id, label, ...rest }) => (
-
- ))}
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { createElement as _createElement } from \\"@emotion/react\\";
-import { jsxDEV as _jsxDEV } from \\"@emotion/react/jsx-dev-runtime\\";
-var _jsxFileName = \\"/test/path/to/some/file.js\\";
-var _ref = {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-};
-export let Buttons = ({
- buttons
-}) => {
- return _jsxDEV(\\"div\\", {
- children: buttons.map(({
- id,
- label,
- ...rest
- }) => _createElement(\\"button\\", { ...rest,
- key: id,
- css: _ref,
- __source: {
- fileName: _jsxFileName,
- lineNumber: 5,
- columnNumber: 9
- },
- __self: this
- }, label))
- }, void 0, false, {
- fileName: _jsxFileName,
- lineNumber: 3,
- columnNumber: 5
- }, this);
-};"
-`;
-
-exports[`automatic runtime dev no-static-children 1`] = `
-"export let Button = props => {
- return (
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsxDEV as _jsxDEV } from \\"@emotion/react/jsx-dev-runtime\\";
-var _jsxFileName = \\"/test/path/to/some/file.js\\";
-var _ref = {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-};
-export let Button = props => {
- return _jsxDEV(\\"button\\", {
- css: _ref,
- ...props
- }, void 0, false, {
- fileName: _jsxFileName,
- lineNumber: 3,
- columnNumber: 5
- }, this);
-};"
-`;
-
-exports[`automatic runtime dev static-children 1`] = `
-"export let Button = () => {
- return (
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsxDEV as _jsxDEV } from \\"@emotion/react/jsx-dev-runtime\\";
-var _jsxFileName = \\"/test/path/to/some/file.js\\";
-var _ref = {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-};
-export let Button = () => {
- return _jsxDEV(\\"button\\", {
- css: _ref,
- children: 'Test'
- }, void 0, false, {
- fileName: _jsxFileName,
- lineNumber: 3,
- columnNumber: 5
- }, this);
-};"
-`;
diff --git a/packages/babel-preset-css-prop/__tests__/__snapshots__/automatic-runtime.js.snap b/packages/babel-preset-css-prop/__tests__/__snapshots__/automatic-runtime.js.snap
deleted file mode 100644
index fc29ebb94..000000000
--- a/packages/babel-preset-css-prop/__tests__/__snapshots__/automatic-runtime.js.snap
+++ /dev/null
@@ -1,194 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`automatic runtime array-css-prop 1`] = `
-"import * as React from 'react'
-
-const Component = props =>
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as _jsx } from \\"@emotion/react/jsx-runtime\\";
-import * as React from 'react';
-var _ref = {
- name: \\"v98kxt\\",
- styles: \\"color:green\\"
-};
-
-const Component = props => _jsx(\\"div\\", {
- css: _ref,
- ...props
-});"
-`;
-
-exports[`automatic runtime fragment 1`] = `
-"export let Button = ({ loading, ...props }) => {
- return (
- <>
-
- {loading && {'Loading...'}}
- >
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as _jsx } from \\"@emotion/react/jsx-runtime\\";
-import { jsxs as _jsxs } from \\"@emotion/react/jsx-runtime\\";
-import { Fragment as _Fragment } from \\"@emotion/react/jsx-runtime\\";
-var _ref = {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-};
-export let Button = ({
- loading,
- ...props
-}) => {
- return _jsxs(_Fragment, {
- children: [_jsx(\\"button\\", {
- css: _ref,
- ...props
- }), loading && _jsx(\\"span\\", {
- children: 'Loading...'
- })]
- });
-};"
-`;
-
-exports[`automatic runtime index 1`] = `
-"import * as React from 'react'
-
-export let Button = props => {
- return (
- <>
-
- >
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as _jsx } from \\"@emotion/react/jsx-runtime\\";
-import { Fragment as _Fragment } from \\"@emotion/react/jsx-runtime\\";
-import * as React from 'react';
-var _ref = {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-};
-export let Button = props => {
- return _jsx(_Fragment, {
- children: _jsx(\\"button\\", {
- css: _ref,
- ...props
- })
- });
-};"
-`;
-
-exports[`automatic runtime key-after-spread 1`] = `
-"export let Buttons = ({ buttons }) => {
- return (
-
- {buttons.map(({ id, label, ...rest }) => (
-
- ))}
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { createElement as _createElement } from \\"@emotion/react\\";
-import { jsx as _jsx } from \\"@emotion/react/jsx-runtime\\";
-var _ref = {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-};
-export let Buttons = ({
- buttons
-}) => {
- return _jsx(\\"div\\", {
- children: buttons.map(({
- id,
- label,
- ...rest
- }) => _createElement(\\"button\\", { ...rest,
- key: id,
- css: _ref
- }, label))
- });
-};"
-`;
-
-exports[`automatic runtime no-static-children 1`] = `
-"export let Button = props => {
- return (
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as _jsx } from \\"@emotion/react/jsx-runtime\\";
-var _ref = {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-};
-export let Button = props => {
- return _jsx(\\"button\\", {
- css: _ref,
- ...props
- });
-};"
-`;
-
-exports[`automatic runtime static-children 1`] = `
-"export let Button = () => {
- return (
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as _jsx } from \\"@emotion/react/jsx-runtime\\";
-var _ref = {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-};
-export let Button = () => {
- return _jsx(\\"button\\", {
- css: _ref,
- children: 'Test'
- });
-};"
-`;
diff --git a/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap b/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap
index b3f514c1e..2e2e0817e 100644
--- a/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap
+++ b/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap
@@ -30,45 +30,6 @@ const Component = props => ___EmotionJSX(\\"div\\", _extends({
}, props));"
`;
-exports[`@emotion/babel-preset-css-prop fragment 1`] = `
-"export let Button = ({ loading, ...props }) => {
- return (
- <>
-
- {loading && {'Loading...'}}
- >
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-} : {
- name: \\"1v4u9bq-Button\\",
- styles: \\"color:hotpink;label:Button;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZyYWdtZW50LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdjIiwiZmlsZSI6ImZyYWdtZW50LmpzIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGxldCBCdXR0b24gPSAoeyBsb2FkaW5nLCAuLi5wcm9wcyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxidXR0b24gY3NzPXt7IGNvbG9yOiAnaG90cGluaycgfX0gey4uLnByb3BzfSAvPlxuICAgICAge2xvYWRpbmcgJiYgPHNwYW4+eydMb2FkaW5nLi4uJ308L3NwYW4+fVxuICAgIDwvPlxuICApXG59XG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-export let Button = ({
- loading,
- ...props
-}) => {
- return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(\\"button\\", _extends({
- css: _ref
- }, props)), loading && ___EmotionJSX(\\"span\\", null, 'Loading...'));
-};"
-`;
-
exports[`@emotion/babel-preset-css-prop index 1`] = `
"import * as React from 'react'
@@ -111,130 +72,3 @@ export let Button = props => {
}, props)));
};"
`;
-
-exports[`@emotion/babel-preset-css-prop key-after-spread 1`] = `
-"export let Buttons = ({ buttons }) => {
- return (
-
- {buttons.map(({ id, label, ...rest }) => (
-
- ))}
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-} : {
- name: \\"1nefsc4-Buttons\\",
- styles: \\"color:hotpink;label:Buttons;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleS1hZnRlci1zcHJlYWQuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT1UiLCJmaWxlIjoia2V5LWFmdGVyLXNwcmVhZC5qcyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBsZXQgQnV0dG9ucyA9ICh7IGJ1dHRvbnMgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICB7YnV0dG9ucy5tYXAoKHsgaWQsIGxhYmVsLCAuLi5yZXN0IH0pID0+IChcbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgIHsuLi5yZXN0fVxuICAgICAgICAgIGtleT17aWR9XG4gICAgICAgICAgY3NzPXt7XG4gICAgICAgICAgICBjb2xvcjogJ2hvdHBpbmsnXG4gICAgICAgICAgfX1cbiAgICAgICAgPlxuICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgPC9idXR0b24+XG4gICAgICApKX1cbiAgICA8L2Rpdj5cbiAgKVxufVxuIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-export let Buttons = ({
- buttons
-}) => {
- return ___EmotionJSX(\\"div\\", null, buttons.map(({
- id,
- label,
- ...rest
- }) => ___EmotionJSX(\\"button\\", _extends({}, rest, {
- key: id,
- css: _ref
- }), label)));
-};"
-`;
-
-exports[`@emotion/babel-preset-css-prop no-static-children 1`] = `
-"export let Button = props => {
- return (
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-} : {
- name: \\"1v4u9bq-Button\\",
- styles: \\"color:hotpink;label:Button;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vLXN0YXRpYy1jaGlsZHJlbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHTSIsImZpbGUiOiJuby1zdGF0aWMtY2hpbGRyZW4uanMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgbGV0IEJ1dHRvbiA9IHByb3BzID0+IHtcbiAgcmV0dXJuIChcbiAgICA8YnV0dG9uXG4gICAgICBjc3M9e3tcbiAgICAgICAgY29sb3I6ICdob3RwaW5rJ1xuICAgICAgfX1cbiAgICAgIHsuLi5wcm9wc31cbiAgICAvPlxuICApXG59XG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-export let Button = props => {
- return ___EmotionJSX(\\"button\\", _extends({
- css: _ref
- }, props));
-};"
-`;
-
-exports[`@emotion/babel-preset-css-prop static-children 1`] = `
-"export let Button = () => {
- return (
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-} : {
- name: \\"1v4u9bq-Button\\",
- styles: \\"color:hotpink;label:Button;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0YXRpYy1jaGlsZHJlbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHTSIsImZpbGUiOiJzdGF0aWMtY2hpbGRyZW4uanMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgbGV0IEJ1dHRvbiA9ICgpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8YnV0dG9uXG4gICAgICBjc3M9e3tcbiAgICAgICAgY29sb3I6ICdob3RwaW5rJ1xuICAgICAgfX1cbiAgICA+XG4gICAgICB7J1Rlc3QnfVxuICAgIDwvYnV0dG9uPlxuICApXG59XG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-export let Button = () => {
- return ___EmotionJSX(\\"button\\", {
- css: _ref
- }, 'Test');
-};"
-`;
diff --git a/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap b/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap
index 23a8c3a96..d80b649ab 100644
--- a/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap
+++ b/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap
@@ -22,37 +22,6 @@ const Component = props => ___EmotionJSX(\\"div\\", _extends({
}, props));"
`;
-exports[`options are used fragment 1`] = `
-"export let Button = ({ loading, ...props }) => {
- return (
- <>
-
- {loading && {'Loading...'}}
- >
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var _ref = {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-};
-export let Button = ({
- loading,
- ...props
-}) => {
- return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(\\"button\\", _extends({
- css: _ref
- }, props)), loading && ___EmotionJSX(\\"span\\", null, 'Loading...'));
-};"
-`;
-
exports[`options are used index 1`] = `
"import * as React from 'react'
@@ -86,105 +55,3 @@ export let Button = props => {
}, props)));
};"
`;
-
-exports[`options are used key-after-spread 1`] = `
-"export let Buttons = ({ buttons }) => {
- return (
-
- {buttons.map(({ id, label, ...rest }) => (
-
- ))}
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var _ref = {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-};
-export let Buttons = ({
- buttons
-}) => {
- return ___EmotionJSX(\\"div\\", null, buttons.map(({
- id,
- label,
- ...rest
- }) => ___EmotionJSX(\\"button\\", _extends({}, rest, {
- key: id,
- css: _ref
- }), label)));
-};"
-`;
-
-exports[`options are used no-static-children 1`] = `
-"export let Button = props => {
- return (
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var _ref = {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-};
-export let Button = props => {
- return ___EmotionJSX(\\"button\\", _extends({
- css: _ref
- }, props));
-};"
-`;
-
-exports[`options are used static-children 1`] = `
-"export let Button = () => {
- return (
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
-var _ref = {
- name: \\"3sn2xs\\",
- styles: \\"color:hotpink\\"
-};
-export let Button = () => {
- return ___EmotionJSX(\\"button\\", {
- css: _ref
- }, 'Test');
-};"
-`;
diff --git a/packages/babel-preset-css-prop/__tests__/automatic-runtime-dev.js b/packages/babel-preset-css-prop/__tests__/automatic-runtime-dev.js
deleted file mode 100644
index 60a3b7fc2..000000000
--- a/packages/babel-preset-css-prop/__tests__/automatic-runtime-dev.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import babelTester from 'babel-tester'
-import preset from '@emotion/babel-preset-css-prop'
-
-babelTester('automatic runtime dev', __dirname, {
- filename: '/test/path/to/some/file.js',
- presets: [
- [
- preset,
- {
- sourceMap: false,
- runtime: 'automatic',
- development: true
- }
- ]
- ]
-})
diff --git a/packages/babel-preset-css-prop/__tests__/automatic-runtime.js b/packages/babel-preset-css-prop/__tests__/automatic-runtime.js
deleted file mode 100644
index f6c2836cf..000000000
--- a/packages/babel-preset-css-prop/__tests__/automatic-runtime.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import babelTester from 'babel-tester'
-import preset from '@emotion/babel-preset-css-prop'
-
-babelTester('automatic runtime', __dirname, {
- presets: [
- [
- preset,
- {
- sourceMap: false,
- runtime: 'automatic'
- }
- ]
- ]
-})
diff --git a/packages/babel-preset-css-prop/package.json b/packages/babel-preset-css-prop/package.json
index 82641edf4..4144b1c69 100644
--- a/packages/babel-preset-css-prop/package.json
+++ b/packages/babel-preset-css-prop/package.json
@@ -11,7 +11,6 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.12.1",
- "@babel/plugin-transform-react-jsx-development": "^7.12.1",
"@babel/runtime": "^7.7.2",
"@emotion/babel-plugin": "^11.0.0-rc.0",
"@emotion/babel-plugin-jsx-pragmatic": "^0.1.5"
diff --git a/packages/babel-preset-css-prop/src/index.js b/packages/babel-preset-css-prop/src/index.js
index f430ab20c..c8082dda8 100644
--- a/packages/babel-preset-css-prop/src/index.js
+++ b/packages/babel-preset-css-prop/src/index.js
@@ -1,5 +1,4 @@
import jsx from '@babel/plugin-transform-react-jsx'
-import jsxDev from '@babel/plugin-transform-react-jsx-development'
import pragmatic from '@emotion/babel-plugin-jsx-pragmatic'
import emotion from '@emotion/babel-plugin'
@@ -12,25 +11,17 @@ let pragmaName = '___EmotionJSX'
export default (
api,
- {
- pragma,
- sourceMap,
- autoLabel,
- labelFormat,
- importMap,
- development = false,
- ...options
- } = {}
+ { pragma, sourceMap, autoLabel, labelFormat, importMap, ...options } = {}
) => {
if (options.runtime) {
- console.warn(
- '`runtime` option has been deprecated. It still works and will continue to work in Emotion 10 but we have found out that including JSX plugin twice in the Babel configuration leads to hard to debug problems and it\'s not always obvious that some presets include it. If you want to configure `runtime: "automatic"` just replace `@emotion/babel-preset-css-prop` with `@babel/preset-react` and `@emotion/babel-plugin`. You can find out how to configure things properly here: https://emotion.sh/docs/css-prop#babel-preset'
+ throw new Error(
+ 'The `runtime` option has been removed. If you want to configure `runtime: "automatic"`, replace `@emotion/babel-preset-css-prop` with `@babel/preset-react` and `@emotion/babel-plugin`. You can find out how to configure things properly here: https://emotion.sh/docs/css-prop#babel-preset'
)
}
return {
plugins: [
- options.runtime !== 'automatic' && [
+ [
pragmatic,
{
export: 'jsx',
@@ -39,11 +30,10 @@ export default (
}
],
[
- development ? jsxDev : jsx,
+ jsx,
{
- ...(options.runtime === 'automatic'
- ? { importSource: '@emotion/react' }
- : { pragma: pragmaName, pragmaFrag: 'React.Fragment' }),
+ pragma: pragmaName,
+ pragmaFrag: 'React.Fragment',
...options
}
],
@@ -57,6 +47,6 @@ export default (
importMap
}
]
- ].filter(Boolean)
+ ]
}
}
diff --git a/scripts/babel-preset-emotion-dev/src/index.js b/scripts/babel-preset-emotion-dev/src/index.js
index fb2627997..d85989897 100644
--- a/scripts/babel-preset-emotion-dev/src/index.js
+++ b/scripts/babel-preset-emotion-dev/src/index.js
@@ -2,12 +2,16 @@ module.exports = (api, options = {}) => {
return {
presets: [
[require.resolve('@babel/preset-env'), { loose: true }],
- options.runtime === 'automatic'
- ? [
- require.resolve('@emotion/babel-preset-css-prop'),
- { runtime: 'automatic', development: options.development }
- ]
- : require.resolve('@babel/preset-react')
+ [
+ require.resolve('@babel/preset-react'),
+ options.runtime === 'automatic'
+ ? {
+ runtime: options.runtime,
+ importSource: '@emotion/react',
+ development: options.development
+ }
+ : {}
+ ]
],
plugins: [
require.resolve(
@@ -26,7 +30,10 @@ module.exports = (api, options = {}) => {
],
options.useEmotionPlugin && [
require.resolve('@emotion/babel-plugin'),
- 'sourceMap' in options ? { sourceMap: options.sourceMap } : {}
+ {
+ ...('sourceMap' in options && { sourceMap: options.sourceMap }),
+ ...(options.runtime === 'automatic' && { cssPropOptimization: true })
+ }
]
].filter(Boolean)
}