From f293ee7fb8762392e1455b38d5a0bc3b3cf4fac9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Mon, 9 Nov 2020 09:33:34 +0100 Subject: [PATCH] Remove `runtime` option from `@emotion/babel-preset-css-prop` --- .changeset/weak-pears-design.md | 5 + .../__tests__/__fixtures__/fragment.js | 8 - .../__fixtures__/key-after-spread.js | 17 -- .../__fixtures__/no-static-children.js | 10 - .../__tests__/__fixtures__/static-children.js | 11 - .../automatic-runtime-dev.js.snap | 233 ------------------ .../__snapshots__/automatic-runtime.js.snap | 194 --------------- .../__tests__/__snapshots__/index.js.snap | 166 ------------- .../__snapshots__/options-are-used.js.snap | 133 ---------- .../__tests__/automatic-runtime-dev.js | 16 -- .../__tests__/automatic-runtime.js | 14 -- packages/babel-preset-css-prop/package.json | 1 - packages/babel-preset-css-prop/src/index.js | 26 +- scripts/babel-preset-emotion-dev/src/index.js | 16 +- 14 files changed, 23 insertions(+), 827 deletions(-) create mode 100644 .changeset/weak-pears-design.md delete mode 100644 packages/babel-preset-css-prop/__tests__/__fixtures__/fragment.js delete mode 100644 packages/babel-preset-css-prop/__tests__/__fixtures__/key-after-spread.js delete mode 100644 packages/babel-preset-css-prop/__tests__/__fixtures__/no-static-children.js delete mode 100644 packages/babel-preset-css-prop/__tests__/__fixtures__/static-children.js delete mode 100644 packages/babel-preset-css-prop/__tests__/__snapshots__/automatic-runtime-dev.js.snap delete mode 100644 packages/babel-preset-css-prop/__tests__/__snapshots__/automatic-runtime.js.snap delete mode 100644 packages/babel-preset-css-prop/__tests__/automatic-runtime-dev.js delete mode 100644 packages/babel-preset-css-prop/__tests__/automatic-runtime.js diff --git a/.changeset/weak-pears-design.md b/.changeset/weak-pears-design.md new file mode 100644 index 0000000000..0aad4339e6 --- /dev/null +++ b/.changeset/weak-pears-design.md @@ -0,0 +1,5 @@ +--- +'@emotion/babel-preset-css-prop': major +--- + +Removed `runtime` option that has been introduced to this preset and deprecated shortly afther that. 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 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 8cce98778e..0000000000 --- a/packages/babel-preset-css-prop/__tests__/__fixtures__/fragment.js +++ /dev/null @@ -1,8 +0,0 @@ -export let Button = ({ loading, ...props }) => { - return ( - <> - - ))} - - ) -} 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 32562407f5..0000000000 --- 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__/__snapshots__/automatic-runtime-dev.js.snap b/packages/babel-preset-css-prop/__tests__/__snapshots__/automatic-runtime-dev.js.snap deleted file mode 100644 index 4682c948d0..0000000000 --- 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 ( - <> - - ))} -
- ) -} - - - ↓ ↓ ↓ ↓ ↓ ↓ - -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 = () => { - 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 fc29ebb94d..0000000000 --- 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 ( - <> - - ))} -
- ) -} - - - ↓ ↓ ↓ ↓ ↓ ↓ - -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 = () => { - 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 b3f514c1ea..2e2e0817ee 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 ( - <> - - ))} - - ) -} - - - ↓ ↓ ↓ ↓ ↓ ↓ - -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 _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 23a8c3a960..d80b649abf 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 ( - <> - - ))} - - ) -} - - - ↓ ↓ ↓ ↓ ↓ ↓ - -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\\"; -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 60a3b7fc20..0000000000 --- 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 f6c2836cfb..0000000000 --- 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 82641edf4d..4144b1c69f 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 f430ab20c3..abb6171410 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( + '`runtime` option has been remove. 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' ) } 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 fb26279974..4bab23cb6e 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(