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 ( - <> - - ))} - - ) -} 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__/__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 ( - <> - - ))} -
- ) -} - - - ↓ ↓ ↓ ↓ ↓ ↓ - -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 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 ( - <> - - ))} -
- ) -} - - - ↓ ↓ ↓ ↓ ↓ ↓ - -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 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 ( - <> - - ))} - - ) -} - - - ↓ ↓ ↓ ↓ ↓ ↓ - -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 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 ( - <> - - ))} - - ) -} - - - ↓ ↓ ↓ ↓ ↓ ↓ - -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 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) }