From 269f8e3fa55ec2ccda89a554e5a2712b4b20cccb Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Tue, 4 May 2021 12:50:47 -0700 Subject: [PATCH] Upgrade to Emotion 11 --- package-lock.json | 375 ++++++++++++++---- package.json | 1 + packages/components/package.json | 12 +- .../alignment-matrix-control-icon-styles.js | 2 +- .../styles/alignment-matrix-control-styles.js | 2 +- .../styles/box-control-icon-styles.js | 2 +- .../box-control/styles/box-control-styles.js | 2 +- .../styles/box-control-visualizer-styles.js | 2 +- .../components/src/flex/flex-item/hook.js | 2 +- packages/components/src/flex/flex/hook.js | 2 +- packages/components/src/flex/styles.js | 2 +- .../styles/input-control-styles.js | 2 +- .../styles/number-control-styles.js | 2 +- .../styles/range-control-styles.js | 2 +- .../styles/select-control-styles.js | 2 +- .../src/spinner/styles/spinner-styles.js | 2 +- .../components/src/style-provider/index.js | 2 +- packages/components/src/text/hook.js | 2 +- packages/components/src/text/styles.js | 2 +- packages/components/src/truncate/hook.js | 2 +- packages/components/src/truncate/styles.js | 2 +- packages/components/src/ui/card/body.js | 2 +- packages/components/src/ui/card/component.js | 4 +- packages/components/src/ui/card/footer.js | 2 +- packages/components/src/ui/card/header.js | 2 +- packages/components/src/ui/card/hook.js | 2 +- packages/components/src/ui/card/inner-body.js | 2 +- packages/components/src/ui/card/styles.js | 2 +- .../src/ui/context/polymorphic-component.ts | 21 - .../src/ui/context/use-context-system.js | 2 +- .../components/src/ui/control-group/hook.js | 2 +- .../components/src/ui/control-group/styles.js | 2 +- .../components/src/ui/control-label/hook.js | 2 +- .../components/src/ui/control-label/styles.js | 2 +- .../components/src/ui/divider/component.tsx | 2 +- packages/components/src/ui/divider/styles.ts | 2 +- packages/components/src/ui/elevation/hook.js | 2 +- .../components/src/ui/elevation/styles.js | 2 +- .../src/ui/form-group/form-group-styles.js | 2 +- .../src/ui/form-group/use-form-group.js | 2 +- packages/components/src/ui/grid/hook.js | 2 +- packages/components/src/ui/popover/content.js | 2 +- packages/components/src/ui/popover/styles.js | 2 +- packages/components/src/ui/scrollable/hook.js | 2 +- .../components/src/ui/scrollable/styles.js | 2 +- packages/components/src/ui/surface/hook.js | 2 +- packages/components/src/ui/surface/styles.js | 2 +- packages/components/src/ui/tooltip/content.js | 2 +- packages/components/src/ui/tooltip/styles.js | 2 +- .../components/src/ui/utils/get-high-dpi.ts | 7 +- .../styles/unit-control-styles.js | 2 +- packages/components/src/utils/input/base.js | 2 +- .../src/utils/input/input-control.js | 2 +- packages/components/src/utils/rtl.js | 2 +- .../components/src/visually-hidden/hook.js | 2 +- .../components/src/visually-hidden/styles.js | 2 +- storybook/main.js | 43 ++ 57 files changed, 413 insertions(+), 150 deletions(-) diff --git a/package-lock.json b/package-lock.json index bd69e7ef719b0..eb14e6b130d80 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1526,10 +1526,64 @@ "@types/hammerjs": "^2.0.36" } }, + "@emotion/babel-plugin": { + "version": "11.3.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz", + "integrity": "sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==", + "requires": { + "@babel/helper-module-imports": "^7.12.13", + "@babel/plugin-syntax-jsx": "^7.12.13", + "@babel/runtime": "^7.13.10", + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.5", + "@emotion/serialize": "^1.0.2", + "babel-plugin-macros": "^2.6.1", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "^4.0.3" + }, + "dependencies": { + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "@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==" + }, + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" + } + } + }, "@emotion/cache": { "version": "10.0.29", "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", + "dev": true, "requires": { "@emotion/sheet": "0.9.4", "@emotion/stylis": "0.8.5", @@ -1540,7 +1594,8 @@ "@emotion/utils": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", - "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==", + "dev": true } } }, @@ -1548,6 +1603,7 @@ "version": "10.1.1", "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.1.1.tgz", "integrity": "sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==", + "dev": true, "requires": { "@babel/runtime": "^7.5.5", "@emotion/cache": "^10.0.27", @@ -1560,7 +1616,8 @@ "@emotion/utils": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", - "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==", + "dev": true } } }, @@ -1568,6 +1625,7 @@ "version": "10.0.27", "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz", "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==", + "dev": true, "requires": { "@emotion/serialize": "^0.11.15", "@emotion/utils": "0.11.3", @@ -1585,7 +1643,8 @@ "@emotion/utils": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", - "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==", + "dev": true } } }, @@ -1598,6 +1657,7 @@ "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz", "integrity": "sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg==", + "optional": true, "requires": { "@emotion/memoize": "0.7.3" } @@ -1605,28 +1665,77 @@ "@emotion/memoize": { "version": "0.7.3", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.3.tgz", - "integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==" - }, - "@emotion/native": { - "version": "10.0.27", - "resolved": "https://registry.npmjs.org/@emotion/native/-/native-10.0.27.tgz", - "integrity": "sha512-3qxR2XFizGfABKKbX9kAYc0PHhKuCEuyxshoq3TaMEbi9asWHdQVChg32ULpblm4XAf9oxaitAU7J9SfdwFxtw==", - "requires": { - "@emotion/primitives-core": "10.0.27" - } + "integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==", + "optional": true }, - "@emotion/primitives-core": { - "version": "10.0.27", - "resolved": "https://registry.npmjs.org/@emotion/primitives-core/-/primitives-core-10.0.27.tgz", - "integrity": "sha512-fRBEDNPSFFOrBJ0OcheuElayrNTNdLF9DzMxtL0sFgsCFvvadlzwJHhJMSwEJuxwARm9GhVLr1p8G8JGkK98lQ==", + "@emotion/react": { + "version": "11.1.5", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.1.5.tgz", + "integrity": "sha512-xfnZ9NJEv9SU9K2sxXM06lzjK245xSeHRpUh67eARBm3PBHjjKIZlfWZ7UQvD0Obvw6ZKjlC79uHrlzFYpOB/Q==", "requires": { - "css-to-react-native": "^2.2.1" + "@babel/runtime": "^7.7.2", + "@emotion/cache": "^11.1.3", + "@emotion/serialize": "^1.0.0", + "@emotion/sheet": "^1.0.1", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "hoist-non-react-statics": "^3.3.1" + }, + "dependencies": { + "@emotion/cache": { + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.1.3.tgz", + "integrity": "sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==", + "requires": { + "@emotion/memoize": "^0.7.4", + "@emotion/sheet": "^1.0.0", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "stylis": "^4.0.3" + } + }, + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "@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/sheet": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz", + "integrity": "sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==" + }, + "csstype": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" + }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + } } }, "@emotion/serialize": { "version": "0.11.15", "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.15.tgz", "integrity": "sha512-YE+qnrmGwyR+XB5j7Bi+0GT1JWsdcjM/d4POu+TXkcnrRs4RFCCsi3d/Ebf+wSStHqAlTT2+dfd+b9N9EO2KBg==", + "dev": true, "requires": { "@emotion/hash": "0.7.4", "@emotion/memoize": "0.7.4", @@ -1638,54 +1747,89 @@ "@emotion/hash": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.4.tgz", - "integrity": "sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==" + "integrity": "sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==", + "dev": true }, "@emotion/memoize": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "dev": true }, "@emotion/unitless": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", - "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", + "dev": true }, "@emotion/utils": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", - "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==", + "dev": true } } }, "@emotion/sheet": { "version": "0.9.4", "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", - "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" + "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==", + "dev": true }, "@emotion/styled": { - "version": "10.0.23", - "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.23.tgz", - "integrity": "sha512-gNr04eqBQ2iYUx8wFLZDfm3N8/QUOODu/ReDXa693uyQGy2OqA+IhPJk+kA7id8aOfwAsMuvZ0pJImEXXKtaVQ==", - "requires": { - "@emotion/styled-base": "^10.0.23", - "babel-plugin-emotion": "^10.0.23" - } - }, - "@emotion/styled-base": { - "version": "10.0.24", - "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.24.tgz", - "integrity": "sha512-AnBImerf0h4dGAJVo0p0VE8KoAns71F28ErGFK474zbNAHX6yqSWQUasb+1jvg/VPwZjCp19+tAr6oOB0pwmLQ==", + "version": "11.3.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz", + "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==", + "dev": true, "requires": { - "@babel/runtime": "^7.5.5", - "@emotion/is-prop-valid": "0.8.5", - "@emotion/serialize": "^0.11.14", - "@emotion/utils": "0.11.2" + "@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==", + "dev": true, + "requires": { + "@emotion/memoize": "^0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==", + "dev": true + }, + "@emotion/serialize": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz", + "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==", + "dev": true, + "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" + } + }, + "csstype": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==", + "dev": true + } } }, "@emotion/stylis": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", + "dev": true }, "@emotion/unitless": { "version": "0.7.5", @@ -1693,9 +1837,9 @@ "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" }, "@emotion/utils": { - "version": "0.11.2", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.2.tgz", - "integrity": "sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA==" + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz", + "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==" }, "@emotion/weak-memoize": { "version": "0.2.5", @@ -13330,11 +13474,12 @@ "version": "file:packages/components", "requires": { "@babel/runtime": "^7.13.10", - "@emotion/cache": "^10.0.27", - "@emotion/core": "^10.1.1", - "@emotion/css": "^10.0.22", - "@emotion/native": "^10.0.22", - "@emotion/styled": "^10.0.23", + "@emotion/cache": "^11.1.3", + "@emotion/core": "^11.0.0", + "@emotion/css": "^11.1.3", + "@emotion/native": "^11.0.0", + "@emotion/react": "^11.1.5", + "@emotion/styled": "^11.3.0", "@wordpress/a11y": "file:packages/a11y", "@wordpress/compose": "file:packages/compose", "@wordpress/date": "file:packages/date", @@ -13352,7 +13497,6 @@ "classnames": "^2.2.5", "dom-scroll-into-view": "^1.2.1", "downshift": "^6.0.15", - "emotion": "^10.0.23", "gradient-parser": "^0.1.5", "highlight-words-core": "^1.2.2", "lodash": "^4.17.19", @@ -13369,6 +13513,35 @@ "uuid": "^8.3.0" }, "dependencies": { + "@emotion/cache": { + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.1.3.tgz", + "integrity": "sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==", + "requires": { + "@emotion/memoize": "^0.7.4", + "@emotion/sheet": "^1.0.0", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "stylis": "^4.0.3" + } + }, + "@emotion/core": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@emotion/core/-/core-11.0.0.tgz", + "integrity": "sha512-w4sE3AmHmyG6RDKf6mIbtHpgJUSJ2uGvPQb8VXFL7hFjMPibE8IiehG8cMX3Ztm4svfCQV6KqusQbeIOkurBcA==" + }, + "@emotion/css": { + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.1.3.tgz", + "integrity": "sha512-RSQP59qtCNTf5NWD6xM08xsQdCZmVYnX/panPYvB6LQAPKQB6GL49Njf0EMbS3CyDtrlWsBcmqBtysFvfWT3rA==", + "requires": { + "@emotion/babel-plugin": "^11.0.0", + "@emotion/cache": "^11.1.3", + "@emotion/serialize": "^1.0.0", + "@emotion/sheet": "^1.0.0", + "@emotion/utils": "^1.0.0" + } + }, "@emotion/is-prop-valid": { "version": "0.8.8", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", @@ -13382,13 +13555,87 @@ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" }, + "@emotion/native": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@emotion/native/-/native-11.0.0.tgz", + "integrity": "sha512-IByi+OfagLtcQsXZMkS06ztcNMZePg6dqwzM4FIkXjN4PhoeJ/jTDRICT3pTIk3ChuurX2oF8fmE+0bfvYi/SA==", + "requires": { + "@emotion/primitives-core": "^11.0.0" + } + }, + "@emotion/primitives-core": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@emotion/primitives-core/-/primitives-core-11.0.0.tgz", + "integrity": "sha512-4zpfUV7hz9A+j7Hcyiend3LEtRogDXDtMzQy8LOoU39Mw5ntgvTlYQSPbQSzs98BJty/F9Ybyg3pBzFDdMpmDg==", + "requires": { + "css-to-react-native": "^3.0.0" + } + }, + "@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/sheet": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz", + "integrity": "sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==" + }, + "@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" + }, + "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/utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz", + "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==" + }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, + "csstype": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" + }, "emotion": { "version": "10.0.27", "resolved": "https://registry.npmjs.org/emotion/-/emotion-10.0.27.tgz", "integrity": "sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==", "requires": { - "babel-plugin-emotion": "^10.0.27", - "create-emotion": "^10.0.27" + "babel-plugin-emotion": "^10.0.27" } }, "fast-deep-equal": { @@ -13403,6 +13650,11 @@ "requires": { "react-is": "^16.7.0" } + }, + "postcss-value-parser": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", + "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==" } } }, @@ -26970,24 +27222,6 @@ "elliptic": "^6.0.0" } }, - "create-emotion": { - "version": "10.0.27", - "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-10.0.27.tgz", - "integrity": "sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==", - "requires": { - "@emotion/cache": "^10.0.27", - "@emotion/serialize": "^0.11.15", - "@emotion/sheet": "0.9.4", - "@emotion/utils": "0.11.3" - }, - "dependencies": { - "@emotion/utils": { - "version": "0.11.3", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", - "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" - } - } - }, "create-hash": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", @@ -55925,6 +56159,11 @@ } } }, + "stylis": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz", + "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==" + }, "sudo-prompt": { "version": "9.1.1", "resolved": "https://registry.npmjs.org/sudo-prompt/-/sudo-prompt-9.1.1.tgz", diff --git a/package.json b/package.json index bae11829f436f..abc9d258b887d 100644 --- a/package.json +++ b/package.json @@ -90,6 +90,7 @@ "@babel/plugin-syntax-jsx": "7.12.13", "@babel/runtime-corejs3": "7.13.10", "@babel/traverse": "7.13.0", + "@emotion/styled": "^11.3.0", "@octokit/rest": "16.26.0", "@octokit/webhooks": "7.1.0", "@storybook/addon-a11y": "6.2.5", diff --git a/packages/components/package.json b/packages/components/package.json index 1bee1745bd899..6c0a2587f3e8c 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -30,11 +30,12 @@ ], "dependencies": { "@babel/runtime": "^7.13.10", - "@emotion/cache": "^10.0.27", - "@emotion/core": "^10.1.1", - "@emotion/css": "^10.0.22", - "@emotion/native": "^10.0.22", - "@emotion/styled": "^10.0.23", + "@emotion/cache": "^11.1.3", + "@emotion/core": "^11.0.0", + "@emotion/css": "^11.1.3", + "@emotion/native": "^11.0.0", + "@emotion/react": "^11.1.5", + "@emotion/styled": "^11.3.0", "@wordpress/a11y": "file:../a11y", "@wordpress/compose": "file:../compose", "@wordpress/date": "file:../date", @@ -52,7 +53,6 @@ "classnames": "^2.2.5", "dom-scroll-into-view": "^1.2.1", "downshift": "^6.0.15", - "emotion": "^10.0.23", "gradient-parser": "^0.1.5", "highlight-words-core": "^1.2.2", "lodash": "^4.17.19", diff --git a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js index bda899a6b395c..1982f4bb6107b 100644 --- a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js +++ b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js @@ -2,7 +2,7 @@ * External dependencies */ import styled from '@emotion/styled'; -import { css } from '@emotion/core'; +import { css } from '@emotion/css'; /** * Internal dependencies diff --git a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js index 1d15682a0d45f..9b2b515315361 100644 --- a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js +++ b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js @@ -2,7 +2,7 @@ * External dependencies */ import styled from '@emotion/styled'; -import { css } from '@emotion/core'; +import { css } from '@emotion/css'; /** * Internal dependencies diff --git a/packages/components/src/box-control/styles/box-control-icon-styles.js b/packages/components/src/box-control/styles/box-control-icon-styles.js index 3443458d262dc..aa8ee0926e8b1 100644 --- a/packages/components/src/box-control/styles/box-control-icon-styles.js +++ b/packages/components/src/box-control/styles/box-control-icon-styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from '@emotion/core'; +import { css } from '@emotion/css'; import styled from '@emotion/styled'; export const Root = styled.span` diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js index 7d42aa42dcb18..52ccdefe64322 100644 --- a/packages/components/src/box-control/styles/box-control-styles.js +++ b/packages/components/src/box-control/styles/box-control-styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from '@emotion/core'; +import { css } from '@emotion/css'; import styled from '@emotion/styled'; /** * Internal dependencies diff --git a/packages/components/src/box-control/styles/box-control-visualizer-styles.js b/packages/components/src/box-control/styles/box-control-visualizer-styles.js index f6bea27b758e9..a1ec31cfc8a69 100644 --- a/packages/components/src/box-control/styles/box-control-visualizer-styles.js +++ b/packages/components/src/box-control/styles/box-control-visualizer-styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from '@emotion/core'; +import { css } from '@emotion/css'; import styled from '@emotion/styled'; /** diff --git a/packages/components/src/flex/flex-item/hook.js b/packages/components/src/flex/flex-item/hook.js index cc1fb57e2fbe3..8d28fcb07c506 100644 --- a/packages/components/src/flex/flex-item/hook.js +++ b/packages/components/src/flex/flex-item/hook.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css, cx } from 'emotion'; +import { css, cx } from '@emotion/css'; /** * Internal dependencies diff --git a/packages/components/src/flex/flex/hook.js b/packages/components/src/flex/flex/hook.js index 89d1d8070ed94..cc5eec4bb604e 100644 --- a/packages/components/src/flex/flex/hook.js +++ b/packages/components/src/flex/flex/hook.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css, cx } from 'emotion'; +import { css, cx } from '@emotion/css'; /** * WordPress dependencies diff --git a/packages/components/src/flex/styles.js b/packages/components/src/flex/styles.js index 68ba8a58be37c..9fdeade2335fc 100644 --- a/packages/components/src/flex/styles.js +++ b/packages/components/src/flex/styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from 'emotion'; +import { css } from '@emotion/css'; export const Flex = css` display: flex; diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js index 759f52ef0608b..ae696f87665e7 100644 --- a/packages/components/src/input-control/styles/input-control-styles.js +++ b/packages/components/src/input-control/styles/input-control-styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from '@emotion/core'; +import { css } from '@emotion/css'; import styled from '@emotion/styled'; /** diff --git a/packages/components/src/number-control/styles/number-control-styles.js b/packages/components/src/number-control/styles/number-control-styles.js index abc89fc916183..77d21a7dea3f1 100644 --- a/packages/components/src/number-control/styles/number-control-styles.js +++ b/packages/components/src/number-control/styles/number-control-styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from '@emotion/core'; +import { css } from '@emotion/css'; import styled from '@emotion/styled'; /** * Internal dependencies diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js index 18b96e6d469b6..ebbad4dedce3b 100644 --- a/packages/components/src/range-control/styles/range-control-styles.js +++ b/packages/components/src/range-control/styles/range-control-styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from '@emotion/core'; +import { css } from '@emotion/css'; import styled from '@emotion/styled'; /** diff --git a/packages/components/src/select-control/styles/select-control-styles.js b/packages/components/src/select-control/styles/select-control-styles.js index 8a3a5a22500ba..14f78f291a612 100644 --- a/packages/components/src/select-control/styles/select-control-styles.js +++ b/packages/components/src/select-control/styles/select-control-styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from '@emotion/core'; +import { css } from '@emotion/css'; import styled from '@emotion/styled'; /** diff --git a/packages/components/src/spinner/styles/spinner-styles.js b/packages/components/src/spinner/styles/spinner-styles.js index 8f30a9febfbd2..f3cd80fe69958 100644 --- a/packages/components/src/spinner/styles/spinner-styles.js +++ b/packages/components/src/spinner/styles/spinner-styles.js @@ -2,7 +2,7 @@ * External dependencies */ import styled from '@emotion/styled'; -import { keyframes } from '@emotion/core'; +import { keyframes } from '@emotion/css'; /** * Internal dependencies diff --git a/packages/components/src/style-provider/index.js b/packages/components/src/style-provider/index.js index 9cf9929389712..1e3ac94fdeeb4 100644 --- a/packages/components/src/style-provider/index.js +++ b/packages/components/src/style-provider/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { CacheProvider } from '@emotion/core'; +import { CacheProvider } from '@emotion/react'; import createCache from '@emotion/cache'; import memoize from 'memize'; diff --git a/packages/components/src/text/hook.js b/packages/components/src/text/hook.js index 24bc033dc2dbc..7cb6370565438 100644 --- a/packages/components/src/text/hook.js +++ b/packages/components/src/text/hook.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css, cx } from 'emotion'; +import { css, cx } from '@emotion/css'; import { isPlainObject } from 'lodash'; /** diff --git a/packages/components/src/text/styles.js b/packages/components/src/text/styles.js index 707e7d7f914d8..6323d6aedc512 100644 --- a/packages/components/src/text/styles.js +++ b/packages/components/src/text/styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from 'emotion'; +import { css } from '@emotion/css'; /** * Internal dependencies diff --git a/packages/components/src/truncate/hook.js b/packages/components/src/truncate/hook.js index 07bfc21f6830f..1ee61012abbb7 100644 --- a/packages/components/src/truncate/hook.js +++ b/packages/components/src/truncate/hook.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css, cx } from 'emotion'; +import { css, cx } from '@emotion/css'; /** * WordPress dependencies diff --git a/packages/components/src/truncate/styles.js b/packages/components/src/truncate/styles.js index 5536c45505a41..b70e64fa76828 100644 --- a/packages/components/src/truncate/styles.js +++ b/packages/components/src/truncate/styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from 'emotion'; +import { css } from '@emotion/css'; export const Truncate = css` display: block; diff --git a/packages/components/src/ui/card/body.js b/packages/components/src/ui/card/body.js index 098b29170ca66..83c4243300281 100644 --- a/packages/components/src/ui/card/body.js +++ b/packages/components/src/ui/card/body.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { cx } from 'emotion'; +import { cx } from '@emotion/css'; /** * WordPress dependencies diff --git a/packages/components/src/ui/card/component.js b/packages/components/src/ui/card/component.js index 4fc8a50770a49..7f717169c234f 100644 --- a/packages/components/src/ui/card/component.js +++ b/packages/components/src/ui/card/component.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from 'emotion'; +import { css } from '@emotion/css'; /** * WordPress dependencies @@ -35,7 +35,7 @@ function Card( props, forwardedRef ) { return ( - { children } + { children } = { selector: string; }; -export type CreatePolymorphicComponent< T extends As, P > = ( - template: TemplateStringsArray, - ...styles: ( - | Interpolation< undefined > - | PolymorphicComponent< any, any > - )[] -) => PolymorphicComponent< T, P >; - export type ForwardedRef< TElement extends HTMLElement > = | ( ( instance: TElement | null ) => void ) | React.MutableRefObject< TElement | null > | null; - -export type CoreElements = { - [ P in keyof JSX.IntrinsicElements ]: PolymorphicComponent< P, {} >; -}; - -type CreateStyledComponents = { - [ P in keyof JSX.IntrinsicElements ]: CreatePolymorphicComponent< P, {} >; -}; - -export type CreateStyled = CreateStyledComponents & { - < T extends As >( component: T ): CreatePolymorphicComponent< T, {} >; -}; diff --git a/packages/components/src/ui/context/use-context-system.js b/packages/components/src/ui/context/use-context-system.js index 8501aa491e107..04fdd3e70744c 100644 --- a/packages/components/src/ui/context/use-context-system.js +++ b/packages/components/src/ui/context/use-context-system.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { cx } from 'emotion'; +import { cx } from '@emotion/css'; /** * WordPress dependencies diff --git a/packages/components/src/ui/control-group/hook.js b/packages/components/src/ui/control-group/hook.js index db3db0c60c19b..b6e55bfc94aae 100644 --- a/packages/components/src/ui/control-group/hook.js +++ b/packages/components/src/ui/control-group/hook.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { cx } from 'emotion'; +import { cx } from '@emotion/css'; /** * Internal dependencies diff --git a/packages/components/src/ui/control-group/styles.js b/packages/components/src/ui/control-group/styles.js index 0c03e04977a72..ef811dec1c51c 100644 --- a/packages/components/src/ui/control-group/styles.js +++ b/packages/components/src/ui/control-group/styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from 'emotion'; +import { css } from '@emotion/css'; export const first = css` border-bottom-right-radius: 0; diff --git a/packages/components/src/ui/control-label/hook.js b/packages/components/src/ui/control-label/hook.js index 81f201d80112e..b7d06f047c498 100644 --- a/packages/components/src/ui/control-label/hook.js +++ b/packages/components/src/ui/control-label/hook.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { cx } from 'emotion'; +import { cx } from '@emotion/css'; /** * Internal dependencies diff --git a/packages/components/src/ui/control-label/styles.js b/packages/components/src/ui/control-label/styles.js index a753ce18ee08f..209b9fee06adf 100644 --- a/packages/components/src/ui/control-label/styles.js +++ b/packages/components/src/ui/control-label/styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from 'emotion'; +import { css } from '@emotion/css'; /** * Internal dependencies diff --git a/packages/components/src/ui/divider/component.tsx b/packages/components/src/ui/divider/component.tsx index 555c3e510d7d5..9366e373c4c19 100644 --- a/packages/components/src/ui/divider/component.tsx +++ b/packages/components/src/ui/divider/component.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css, cx } from 'emotion'; +import { css, cx } from '@emotion/css'; // eslint-disable-next-line no-restricted-imports import { Separator } from 'reakit'; // eslint-disable-next-line no-restricted-imports, no-duplicate-imports diff --git a/packages/components/src/ui/divider/styles.ts b/packages/components/src/ui/divider/styles.ts index 3dca592c0afe7..e6d0738792e49 100644 --- a/packages/components/src/ui/divider/styles.ts +++ b/packages/components/src/ui/divider/styles.ts @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from 'emotion'; +import { css } from '@emotion/css'; /** * Internal dependencies diff --git a/packages/components/src/ui/elevation/hook.js b/packages/components/src/ui/elevation/hook.js index 0489698745574..73226c29b684e 100644 --- a/packages/components/src/ui/elevation/hook.js +++ b/packages/components/src/ui/elevation/hook.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css, cx } from 'emotion'; +import { css, cx } from '@emotion/css'; import { isNil } from 'lodash'; /** diff --git a/packages/components/src/ui/elevation/styles.js b/packages/components/src/ui/elevation/styles.js index 4a22b2f598498..23c29f01d85bc 100644 --- a/packages/components/src/ui/elevation/styles.js +++ b/packages/components/src/ui/elevation/styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from 'emotion'; +import { css } from '@emotion/css'; export const Elevation = css` background: transparent; diff --git a/packages/components/src/ui/form-group/form-group-styles.js b/packages/components/src/ui/form-group/form-group-styles.js index 1b7782c0e1046..d1c4766658159 100644 --- a/packages/components/src/ui/form-group/form-group-styles.js +++ b/packages/components/src/ui/form-group/form-group-styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from 'emotion'; +import { css } from '@emotion/css'; export const FormGroup = css` width: 100%; diff --git a/packages/components/src/ui/form-group/use-form-group.js b/packages/components/src/ui/form-group/use-form-group.js index a8dbcaf1e046f..54f9288f1a295 100644 --- a/packages/components/src/ui/form-group/use-form-group.js +++ b/packages/components/src/ui/form-group/use-form-group.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { cx } from 'emotion'; +import { cx } from '@emotion/css'; /** * Internal dependencies diff --git a/packages/components/src/ui/grid/hook.js b/packages/components/src/ui/grid/hook.js index 5683a8c50a340..5e8310a139080 100644 --- a/packages/components/src/ui/grid/hook.js +++ b/packages/components/src/ui/grid/hook.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css, cx } from 'emotion'; +import { css, cx } from '@emotion/css'; /** * WordPress dependencies diff --git a/packages/components/src/ui/popover/content.js b/packages/components/src/ui/popover/content.js index 06713ecc01bb0..5b8895b440483 100644 --- a/packages/components/src/ui/popover/content.js +++ b/packages/components/src/ui/popover/content.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css, cx } from 'emotion'; +import { css, cx } from '@emotion/css'; // eslint-disable-next-line no-restricted-imports import { Popover as ReakitPopover } from 'reakit'; diff --git a/packages/components/src/ui/popover/styles.js b/packages/components/src/ui/popover/styles.js index 8618e684056ba..4147c2f252724 100644 --- a/packages/components/src/ui/popover/styles.js +++ b/packages/components/src/ui/popover/styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from 'emotion'; +import { css } from '@emotion/css'; /** * Internal dependencies diff --git a/packages/components/src/ui/scrollable/hook.js b/packages/components/src/ui/scrollable/hook.js index 3cf82c907307c..d4a7c0ec4ce05 100644 --- a/packages/components/src/ui/scrollable/hook.js +++ b/packages/components/src/ui/scrollable/hook.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { cx } from 'emotion'; +import { cx } from '@emotion/css'; /** * WordPress dependencies diff --git a/packages/components/src/ui/scrollable/styles.js b/packages/components/src/ui/scrollable/styles.js index bed0a02fd02d2..1ea5ef7dfc69b 100644 --- a/packages/components/src/ui/scrollable/styles.js +++ b/packages/components/src/ui/scrollable/styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from 'emotion'; +import { css } from '@emotion/css'; /** * Internal dependencies */ diff --git a/packages/components/src/ui/surface/hook.js b/packages/components/src/ui/surface/hook.js index 889d879a4d3f5..2315f4a138969 100644 --- a/packages/components/src/ui/surface/hook.js +++ b/packages/components/src/ui/surface/hook.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { cx } from 'emotion'; +import { cx } from '@emotion/css'; /** * WordPress dependencies diff --git a/packages/components/src/ui/surface/styles.js b/packages/components/src/ui/surface/styles.js index 3ab046562b5b8..9520637504c1f 100644 --- a/packages/components/src/ui/surface/styles.js +++ b/packages/components/src/ui/surface/styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from 'emotion'; +import { css } from '@emotion/css'; /** * Internal dependencies diff --git a/packages/components/src/ui/tooltip/content.js b/packages/components/src/ui/tooltip/content.js index 26dd1ac6bef45..b7edbecff8229 100644 --- a/packages/components/src/ui/tooltip/content.js +++ b/packages/components/src/ui/tooltip/content.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { cx } from 'emotion'; +import { cx } from '@emotion/css'; // eslint-disable-next-line no-restricted-imports import { Tooltip as ReakitTooltip } from 'reakit'; diff --git a/packages/components/src/ui/tooltip/styles.js b/packages/components/src/ui/tooltip/styles.js index 868699e8bb162..e50a89aab2409 100644 --- a/packages/components/src/ui/tooltip/styles.js +++ b/packages/components/src/ui/tooltip/styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from 'emotion'; +import { css } from '@emotion/css'; import styled from '@emotion/styled'; /** diff --git a/packages/components/src/ui/utils/get-high-dpi.ts b/packages/components/src/ui/utils/get-high-dpi.ts index 6e9073533300c..92d190566548f 100644 --- a/packages/components/src/ui/utils/get-high-dpi.ts +++ b/packages/components/src/ui/utils/get-high-dpi.ts @@ -1,12 +1,13 @@ /** * External dependencies */ -import type { Interpolation } from '@emotion/core'; -import { css } from 'emotion'; +import { css } from '@emotion/css'; +// eslint-disable-next-line no-duplicate-imports +import type { CSSInterpolation } from '@emotion/css'; export function getHighDpi( strings: TemplateStringsArray, - ...interpolations: Interpolation[] + ...interpolations: CSSInterpolation[] ) { const interpolatedStyles = css( strings, ...interpolations ); diff --git a/packages/components/src/unit-control/styles/unit-control-styles.js b/packages/components/src/unit-control/styles/unit-control-styles.js index 3c38a49685f1b..c5bffe628a391 100644 --- a/packages/components/src/unit-control/styles/unit-control-styles.js +++ b/packages/components/src/unit-control/styles/unit-control-styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from '@emotion/core'; +import { css } from '@emotion/css'; import styled from '@emotion/styled'; /** * Internal dependencies diff --git a/packages/components/src/utils/input/base.js b/packages/components/src/utils/input/base.js index 91c1c3be939ed..75ccbf6953c15 100644 --- a/packages/components/src/utils/input/base.js +++ b/packages/components/src/utils/input/base.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from '@emotion/core'; +import { css } from '@emotion/css'; /** * Internal dependencies diff --git a/packages/components/src/utils/input/input-control.js b/packages/components/src/utils/input/input-control.js index ef63f997b9e92..1e7a4493f3cda 100644 --- a/packages/components/src/utils/input/input-control.js +++ b/packages/components/src/utils/input/input-control.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from '@emotion/core'; +import { css } from '@emotion/css'; /** * Internal dependencies diff --git a/packages/components/src/utils/rtl.js b/packages/components/src/utils/rtl.js index 7e46a4bf6a272..ae1f5a772f86d 100644 --- a/packages/components/src/utils/rtl.js +++ b/packages/components/src/utils/rtl.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from '@emotion/core'; +import { css } from '@emotion/css'; import { mapKeys } from 'lodash'; /** diff --git a/packages/components/src/visually-hidden/hook.js b/packages/components/src/visually-hidden/hook.js index 61205a5cf2335..b80904c240e79 100644 --- a/packages/components/src/visually-hidden/hook.js +++ b/packages/components/src/visually-hidden/hook.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { cx } from 'emotion'; +import { cx } from '@emotion/css'; /** * Internal dependencies diff --git a/packages/components/src/visually-hidden/styles.js b/packages/components/src/visually-hidden/styles.js index fe034ae7e94d6..d3cc111d873a9 100644 --- a/packages/components/src/visually-hidden/styles.js +++ b/packages/components/src/visually-hidden/styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from 'emotion'; +import { css } from '@emotion/css'; /** * Internal dependencies diff --git a/storybook/main.js b/storybook/main.js index d410195ee23b1..a47a600470558 100644 --- a/storybook/main.js +++ b/storybook/main.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +const path = require( 'path' ); + const stories = [ process.env.NODE_ENV !== 'test' && './stories/**/*.(js|mdx)', '../packages/block-editor/src/**/stories/*.js', @@ -9,6 +14,24 @@ const customEnvVariables = { COMPONENT_SYSTEM_PHASE: 1, }; +const modulesDir = path.join( __dirname, '../node_modules' ); + +// Workaround for Emtion 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, addons: [ @@ -21,6 +44,7 @@ module.exports = { '@storybook/addon-viewport', '@storybook/addon-a11y', ], + managerWebpack: updateEmotionAliases, // Workaround: // https://github.com/storybookjs/storybook/issues/12270 webpackFinal: async ( config ) => { @@ -35,6 +59,25 @@ module.exports = { ); } ); + return updateEmotionAliases( config ); + }, + babel: ( config ) => { + const getEntryIndexByName = ( type, name ) => { + return config[ type ].findIndex( ( entry ) => { + const entryName = Array.isArray( entry ) ? entry[ 0 ] : entry; + return entryName.includes( name ); + } ); + }; + + // Replace reference to v10 of the Babel plugin to v11. + const emotionPluginIndex = getEntryIndexByName( + 'plugins', + 'babel-plugin-emotion' + ); + config.plugins[ emotionPluginIndex ] = require.resolve( + '@emotion/babel-plugin' + ); + return config; }, };