Add workaround for @emotion packages naming issue

Storybook uses @emotion packages v10 and @wordpress/components require v11. Storybook works with version 11 but since there were some merges in @emotion packages we need to set some aliases and also make sure correct versions are installed on top level in node_modules. See https://github.com/storybookjs/storybook/pull/13300#issuecomment-783268111 This workaround was done based on a workaround applied in the Gutenberg project bc072fddef [MAILPOET-3654]
2021-08-10 14:24:14 +02:00
parent 3871add5a6
commit e8a6f5b1ad
3 changed files with 146 additions and 80 deletions
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,14 +1,30 @@
 const path = require('path');

+const modulesDir = path.join( __dirname, '../node_modules' );
+console.log('NODE', modulesDir);
+// Workaround for Emotion 11
+// https://github.com/storybookjs/storybook/pull/13300#issuecomment-783268111
+const updateEmotionAliases = (config) => ({
+  ...config,
+  resolve: {
+    ...config.resolve,
+    alias: {
+      ...config.resolve.alias,
+      '@emotion/core': path.join(modulesDir, '@emotion/react'),
+      '@emotion/styled': path.join(modulesDir, '@emotion/styled'),
+      '@emotion/styled-base': path.join(modulesDir, '@emotion/styled'),
+      'emotion-theming': path.join(modulesDir, '@emotion/react'),
+    },
+  },
+});
+
 module.exports = {
  stories: ['../assets/js/src/**/_stories/*.tsx'],
-  webpackFinal: (config) => ({
-    ...config,
-    resolve: {
-      ...config.resolve,
-      modules: ['node_modules', '../assets/js/src'],
-    },
-  }),
+  webpackFinal: (config) => {
+    config.resolve.modules = ['node_modules', '../assets/js/src'];
+    return updateEmotionAliases(config);
+  },
+  managerWebpack: updateEmotionAliases,
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
      "dependencies": {
        "@babel/runtime": "^7.14.0",
        "@babel/runtime-corejs3": "^7.14.0",
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
        "@wordpress/api-fetch": "^5.2.1",
        "@wordpress/block-editor": "^7.0.1",
        "@wordpress/block-library": "^5.0.1",
@@ -2533,23 +2535,34 @@
      "dev": true
    },
    "node_modules/@emotion/styled": {
-      "version": "10.0.27",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz",
-      "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==",
-      "dev": true,
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz",
+      "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==",
      "dependencies": {
-        "@emotion/styled-base": "^10.0.27",
-        "babel-plugin-emotion": "^10.0.27"
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.3.0",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/utils": "^1.0.0"
      },
      "peerDependencies": {
-        "@emotion/core": "^10.0.27",
-        "react": ">=16.3.0"
+        "@babel/core": "^7.0.0",
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
      }
    },
    "node_modules/@emotion/styled-base": {
-      "version": "10.0.30",
-      "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.30.tgz",
-      "integrity": "sha512-pjAZxjnDzLQ5F0Wv3DgTLvg8pw4bMSABP9GHDdCaDjZak/8Il5mQRLs15h9AKC95E8QG1NEr11GfHO1SGYV5ZA==",
+      "version": "10.0.31",
+      "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.31.tgz",
+      "integrity": "sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==",
      "dev": true,
      "dependencies": {
        "@babel/runtime": "^7.5.5",
@@ -2562,6 +2575,36 @@
        "react": ">=16.3.0"
      }
    },
+    "node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
+      "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4"
+      }
+    },
+    "node_modules/@emotion/styled/node_modules/@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "dependencies": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/styled/node_modules/@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "node_modules/@emotion/styled/node_modules/csstype": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
+    },
    "node_modules/@emotion/stylis": {
      "version": "0.8.5",
      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
@@ -6188,6 +6231,20 @@
        "react-dom": "^16.8.0 || ^17.0.0"
      }
    },
+    "node_modules/@storybook/theming/node_modules/@emotion/styled": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz",
+      "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/styled-base": "^10.0.27",
+        "babel-plugin-emotion": "^10.0.27"
+      },
+      "peerDependencies": {
+        "@emotion/core": "^10.0.27",
+        "react": ">=16.3.0"
+      }
+    },
    "node_modules/@storybook/theming/node_modules/resolve-from": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
@@ -7845,14 +7902,6 @@
        }
      }
    },
-    "node_modules/@wordpress/components/node_modules/@emotion/is-prop-valid": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
-      "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
-      "dependencies": {
-        "@emotion/memoize": "^0.7.4"
-      }
-    },
    "node_modules/@wordpress/components/node_modules/@emotion/serialize": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
@@ -7870,31 +7919,6 @@
      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.2.tgz",
      "integrity": "sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw=="
    },
-    "node_modules/@wordpress/components/node_modules/@emotion/styled": {
-      "version": "11.3.0",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz",
-      "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@emotion/babel-plugin": "^11.3.0",
-        "@emotion/is-prop-valid": "^1.1.0",
-        "@emotion/serialize": "^1.0.2",
-        "@emotion/utils": "^1.0.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0",
-        "@emotion/react": "^11.0.0-rc.0",
-        "react": ">=16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "@babel/core": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/@wordpress/components/node_modules/@emotion/utils": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
@@ -33651,19 +33675,53 @@
      "dev": true
    },
    "@emotion/styled": {
-      "version": "10.0.27",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz",
-      "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==",
-      "dev": true,
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz",
+      "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==",
      "requires": {
-        "@emotion/styled-base": "^10.0.27",
-        "babel-plugin-emotion": "^10.0.27"
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.3.0",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/utils": "^1.0.0"
+      },
+      "dependencies": {
+        "@emotion/is-prop-valid": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
+          "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
+          "requires": {
+            "@emotion/memoize": "^0.7.4"
+          }
+        },
+        "@emotion/serialize": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+          "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+          "requires": {
+            "@emotion/hash": "^0.8.0",
+            "@emotion/memoize": "^0.7.4",
+            "@emotion/unitless": "^0.7.5",
+            "@emotion/utils": "^1.0.0",
+            "csstype": "^3.0.2"
+          }
+        },
+        "@emotion/utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+          "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+        },
+        "csstype": {
+          "version": "3.0.8",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+          "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
+        }
      }
    },
    "@emotion/styled-base": {
-      "version": "10.0.30",
-      "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.30.tgz",
-      "integrity": "sha512-pjAZxjnDzLQ5F0Wv3DgTLvg8pw4bMSABP9GHDdCaDjZak/8Il5mQRLs15h9AKC95E8QG1NEr11GfHO1SGYV5ZA==",
+      "version": "10.0.31",
+      "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.31.tgz",
+      "integrity": "sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==",
      "dev": true,
      "requires": {
        "@babel/runtime": "^7.5.5",
@@ -36338,6 +36396,16 @@
        "ts-dedent": "^2.0.0"
      },
      "dependencies": {
+        "@emotion/styled": {
+          "version": "10.0.27",
+          "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz",
+          "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==",
+          "dev": true,
+          "requires": {
+            "@emotion/styled-base": "^10.0.27",
+            "babel-plugin-emotion": "^10.0.27"
+          }
+        },
        "resolve-from": {
          "version": "5.0.0",
          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
@@ -37725,14 +37793,6 @@
            "@emotion/utils": "^1.0.0"
          }
        },
-        "@emotion/is-prop-valid": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
-          "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
-          "requires": {
-            "@emotion/memoize": "^0.7.4"
-          }
-        },
        "@emotion/serialize": {
          "version": "1.0.2",
          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
@@ -37750,18 +37810,6 @@
          "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.2.tgz",
          "integrity": "sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw=="
        },
-        "@emotion/styled": {
-          "version": "11.3.0",
-          "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz",
-          "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==",
-          "requires": {
-            "@babel/runtime": "^7.13.10",
-            "@emotion/babel-plugin": "^11.3.0",
-            "@emotion/is-prop-valid": "^1.1.0",
-            "@emotion/serialize": "^1.0.2",
-            "@emotion/utils": "^1.0.0"
-          }
-        },
        "@emotion/utils": {
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -38,6 +38,8 @@
  "dependencies": {
    "@babel/runtime": "^7.14.0",
    "@babel/runtime-corejs3": "^7.14.0",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
    "@wordpress/api-fetch": "^5.2.1",
    "@wordpress/block-editor": "^7.0.1",
    "@wordpress/block-library": "^5.0.1",