fix(babel): to use import source for emotion and automatic runtime (#…

…1856)

* fix(babel): to use import source for automatic runtime

* Create witty-emus-share.md

* fix(babel): use emotion plugin not css prop preset

* fix: just seeing if its a resolution issue

* fix(babel): jsx runtime setup for emotion

* chore: remove dep resolution

Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.de>

.changeset/witty-emus-share.md

@@ -0,0 +1,5 @@
+---
+"@commercetools-frontend/babel-preset-mc-app": patch
+---
+
+fix(babel): enable new JSX runtime for Emotion.

packages/babel-preset-mc-app/index.js

@@ -59,13 +59,17 @@ module.exports = function getBabePresetConfigForMcApp(api, opts = {}) {
           development: isEnvDevelopment || isEnvTest,
           // Will use the native built-in instead of trying to polyfill
           // behavior for any plugins that require one.
-          ...(opts.runtime !== 'automatic'
-            ? { useBuiltIns: true, pragmaFrag: 'Fragment' }
-            : {}),
+          ...(opts.runtime === 'automatic'
+            ? // https://emotion.sh/docs/css-prop#babel-preset
+              { importSource: '@emotion/core' }
+            : { useBuiltIns: true }),
           runtime: opts.runtime || 'classic',
         },
       ],
-      [
+      // Use this preset only with the JSX runtime `classic`, otherwise
+      // use the `babel-plugin-emotion` plugin.
+      // https://emotion.sh/docs/@emotion/babel-preset-css-prop
+      opts.runtime !== 'automatic' && [
         '@emotion/babel-preset-css-prop',
         {
           sourceMap: isEnvDevelopment,
@@ -133,6 +137,10 @@ module.exports = function getBabePresetConfigForMcApp(api, opts = {}) {
       ],
       require('@babel/plugin-proposal-do-expressions').default,
       require('@babel/plugin-proposal-logical-assignment-operators').default,
+      // Use this plugin only with the JSX runtime `automatic`, otherwise
+      // use the `@emotion/babel-preset-css-prop` preset.
+      // https://emotion.sh/docs/@emotion/babel-preset-css-prop
+      opts.runtime === 'automatic' && require('babel-plugin-emotion').default,
     ].filter(Boolean),
   };
 };

packages/babel-preset-mc-app/package.json

@@ -40,7 +40,8 @@
     "@babel/preset-typescript": "7.12.1",
     "@babel/runtime": "7.12.1",
     "@babel/runtime-corejs3": "7.12.1",
-    "@emotion/babel-preset-css-prop": "10.1.0",
+    "@emotion/babel-preset-css-prop": "10.2.0",
+    "babel-plugin-emotion": "10.0.33",
     "babel-plugin-dev-expression": "0.2.2",
     "babel-plugin-macros": "2.8.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",

yarn.lock

@@ -2644,10 +2644,10 @@
   dependencies:
     "@babel/plugin-syntax-jsx" "^7.2.0"
 
-"@emotion/babel-preset-css-prop@10.1.0":
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-10.1.0.tgz#4800943dff35bd82a83891b278565918bbed14a7"
-  integrity sha512-t1ar2Zt3fJ/TuoEg7Oin4sYdYt4BMWbvsQkaO4rq0II4hb9t/NdbCUd0jXFIYDuf0FYhyDEHt6sqpdPAG4uQrA==
+"@emotion/babel-preset-css-prop@10.2.0":
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-10.2.0.tgz#cddb662b0dace7ea62f69439965ea156a7a486b9"
+  integrity sha512-3I0CAZ+0fA/VjwNxL4/qfsgiuXtEM/Kvnl49oqSf51bl+kNxsHdypb0J/mdBY8OifuTbwjAOsQkRLVPdUtJN4Q==
   dependencies:
     "@babel/plugin-transform-react-jsx" "^7.12.1"
     "@babel/plugin-transform-react-jsx-development" "^7.12.1"
@@ -2675,7 +2675,7 @@
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
-"@emotion/core@10.1.1":
+"@emotion/core@10.1.1", "@emotion/core@^10.0.34", "@emotion/core@^10.0.9":
   version "10.1.1"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3"
   integrity sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==
@@ -2687,18 +2687,6 @@
     "@emotion/sheet" "0.9.4"
     "@emotion/utils" "0.11.3"
 
-"@emotion/core@^10.0.34", "@emotion/core@^10.0.9":
-  version "10.0.35"
-  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3"
-  integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/cache" "^10.0.27"
-    "@emotion/css" "^10.0.27"
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/sheet" "0.9.4"
-    "@emotion/utils" "0.11.3"
-
 "@emotion/css@^10.0.27", "@emotion/css@^10.0.9":
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
@@ -7675,7 +7663,7 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-emotion@^10.0.27:
+babel-plugin-emotion@10.0.33, babel-plugin-emotion@^10.0.27:
   version "10.0.33"
   resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03"
   integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==