diff --git a/.changeset/large-taxis-deny.md b/.changeset/large-taxis-deny.md
new file mode 100644
index 0000000000..453e3da2e3
--- /dev/null
+++ b/.changeset/large-taxis-deny.md
@@ -0,0 +1,8 @@
+---
+"@commercetools-frontend/application-components": patch
+"@commercetools-frontend/application-shell": patch
+"@commercetools-frontend/babel-preset-mc-app": patch
+"@commercetools-frontend/react-notifications": patch
+---
+
+Migrate to emotion v11. https://emotion.sh/docs/emotion-11
diff --git a/@types-extensions/emotion.d.ts b/@types-extensions/emotion.d.ts
new file mode 100644
index 0000000000..507407cc61
--- /dev/null
+++ b/@types-extensions/emotion.d.ts
@@ -0,0 +1,13 @@
+/**
+ * https://emotion.sh/docs/emotion-11#css-prop-types
+ *
+ * However, if you are stuck with older version of TypeScript or using the
+ * classic runtime implicitly by using our `@emotion/babel-preset-css-prop`
+ * then it’s not possible to leverage `css` prop support being added conditionally
+ * based on a type of rendered component.
+ * For those cases we have added a special file that can be imported once
+ * to add support for the `css` prop globally, for all components.
+ *
+ * TODO: remove this once we switch to automatic jsx runtime
+ */
+///
diff --git a/packages/application-components/package.json b/packages/application-components/package.json
index 17d4cd3afc..383bfe3a06 100644
--- a/packages/application-components/package.json
+++ b/packages/application-components/package.json
@@ -48,8 +48,8 @@
"@commercetools-uikit/secondary-icon-button": "^10.40.0",
"@commercetools-uikit/spacings": "^10.40.0",
"@commercetools-uikit/text": "10.40.0",
- "@emotion/core": "10.1.1",
- "@emotion/styled": "10.0.27",
+ "@emotion/react": "11.1.1",
+ "@emotion/styled": "11.0.0",
"@types/lodash": "^4.14.155",
"@types/prop-types": "^15.7.3",
"@types/react-modal": "^3.10.4",
diff --git a/packages/application-components/src/components/dialogs/internals/dialog-container.tsx b/packages/application-components/src/components/dialogs/internals/dialog-container.tsx
index 82e9fc9dc0..fda8889000 100644
--- a/packages/application-components/src/components/dialogs/internals/dialog-container.tsx
+++ b/packages/application-components/src/components/dialogs/internals/dialog-container.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import Modal from 'react-modal';
-import { css, ClassNames } from '@emotion/core';
+import { css, ClassNames } from '@emotion/react';
import styled from '@emotion/styled';
import { PORTALS_CONTAINER_ID } from '@commercetools-frontend/constants';
import { customProperties } from '@commercetools-uikit/design-system';
diff --git a/packages/application-components/src/components/dialogs/internals/dialog-header.tsx b/packages/application-components/src/components/dialogs/internals/dialog-header.tsx
index 1ae7b2495b..cb61f28d52 100644
--- a/packages/application-components/src/components/dialogs/internals/dialog-header.tsx
+++ b/packages/application-components/src/components/dialogs/internals/dialog-header.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import { CloseIcon } from '@commercetools-uikit/icons';
import SecondaryIconButton from '@commercetools-uikit/secondary-icon-button';
import Text from '@commercetools-uikit/text';
diff --git a/packages/application-components/src/components/dialogs/internals/dialog.styles.ts b/packages/application-components/src/components/dialogs/internals/dialog.styles.ts
index 69635ba365..b1f23e24c3 100644
--- a/packages/application-components/src/components/dialogs/internals/dialog.styles.ts
+++ b/packages/application-components/src/components/dialogs/internals/dialog.styles.ts
@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import { customProperties } from '@commercetools-uikit/design-system';
type StyleProps = {
diff --git a/packages/application-components/src/components/maintenance-page-layout/maintenance-page-layout.tsx b/packages/application-components/src/components/maintenance-page-layout/maintenance-page-layout.tsx
index b2a3fb488c..066280769b 100644
--- a/packages/application-components/src/components/maintenance-page-layout/maintenance-page-layout.tsx
+++ b/packages/application-components/src/components/maintenance-page-layout/maintenance-page-layout.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import Constraints from '@commercetools-uikit/constraints';
import Text from '@commercetools-uikit/text';
import Spacings from '@commercetools-uikit/spacings';
diff --git a/packages/application-components/src/components/modal-pages/internals/modal-page-header-title.tsx b/packages/application-components/src/components/modal-pages/internals/modal-page-header-title.tsx
index d0626c949e..1c0dcfa4ce 100644
--- a/packages/application-components/src/components/modal-pages/internals/modal-page-header-title.tsx
+++ b/packages/application-components/src/components/modal-pages/internals/modal-page-header-title.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { customProperties } from '@commercetools-uikit/design-system';
import Text from '@commercetools-uikit/text';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import styled from '@emotion/styled';
type Props = {
diff --git a/packages/application-components/src/components/modal-pages/internals/modal-page-header.tsx b/packages/application-components/src/components/modal-pages/internals/modal-page-header.tsx
index 6e17560918..a20fe8dfbd 100644
--- a/packages/application-components/src/components/modal-pages/internals/modal-page-header.tsx
+++ b/packages/application-components/src/components/modal-pages/internals/modal-page-header.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { customProperties } from '@commercetools-uikit/design-system';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import ModalPageHeaderTitle from './modal-page-header-title';
type Props = {
diff --git a/packages/application-components/src/components/modal-pages/internals/modal-page-top-bar.tsx b/packages/application-components/src/components/modal-pages/internals/modal-page-top-bar.tsx
index c4631e9fc8..60fc089bcb 100644
--- a/packages/application-components/src/components/modal-pages/internals/modal-page-top-bar.tsx
+++ b/packages/application-components/src/components/modal-pages/internals/modal-page-top-bar.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { useIntl } from 'react-intl';
import { CloseIcon, AngleLeftIcon } from '@commercetools-uikit/icons';
diff --git a/packages/application-components/src/components/modal-pages/internals/modal-page.styles.ts b/packages/application-components/src/components/modal-pages/internals/modal-page.styles.ts
index 157d3a6b2f..cf33fc4c42 100644
--- a/packages/application-components/src/components/modal-pages/internals/modal-page.styles.ts
+++ b/packages/application-components/src/components/modal-pages/internals/modal-page.styles.ts
@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { customProperties } from '@commercetools-uikit/design-system';
diff --git a/packages/application-components/src/components/modal-pages/internals/modal-page.tsx b/packages/application-components/src/components/modal-pages/internals/modal-page.tsx
index a83f1e0b4a..d5099b4557 100644
--- a/packages/application-components/src/components/modal-pages/internals/modal-page.tsx
+++ b/packages/application-components/src/components/modal-pages/internals/modal-page.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import Modal from 'react-modal';
-import { ClassNames } from '@emotion/core';
+import { ClassNames } from '@emotion/react';
import { PORTALS_CONTAINER_ID } from '@commercetools-frontend/constants';
import {
TRANSITION_DURATION,
diff --git a/packages/application-components/src/components/modal-pages/tabular-modal-page/tabular-modal-page.tsx b/packages/application-components/src/components/modal-pages/tabular-modal-page/tabular-modal-page.tsx
index b531598d3d..303f8886dc 100644
--- a/packages/application-components/src/components/modal-pages/tabular-modal-page/tabular-modal-page.tsx
+++ b/packages/application-components/src/components/modal-pages/tabular-modal-page/tabular-modal-page.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import { customProperties } from '@commercetools-uikit/design-system';
import Spacings from '@commercetools-uikit/spacings';
import { sharedMessages } from '@commercetools-frontend/i18n';
diff --git a/packages/application-components/src/index.ts b/packages/application-components/src/index.ts
index d2d2ab3a6b..8131c8cc2e 100644
--- a/packages/application-components/src/index.ts
+++ b/packages/application-components/src/index.ts
@@ -1,3 +1,17 @@
+/**
+ * https://emotion.sh/docs/emotion-11#css-prop-types
+ *
+ * However, if you are stuck with older version of TypeScript or using the
+ * classic runtime implicitly by using our `@emotion/babel-preset-css-prop`
+ * then it’s not possible to leverage `css` prop support being added conditionally
+ * based on a type of rendered component.
+ * For those cases we have added a special file that can be imported once
+ * to add support for the `css` prop globally, for all components.
+ *
+ * TODO: remove this once we switch to automatic jsx runtime
+ */
+///
+
export { default as version } from './version';
// Maintenance pages
diff --git a/packages/application-shell/package.json b/packages/application-shell/package.json
index f8486a0524..d1ae59d1b6 100644
--- a/packages/application-shell/package.json
+++ b/packages/application-shell/package.json
@@ -56,8 +56,8 @@
"@commercetools-uikit/select-input": "^10.40.1",
"@commercetools-uikit/spacings": "^10.40.0",
"@commercetools-uikit/text": "^10.40.0",
- "@emotion/core": "10.1.1",
- "@emotion/styled": "10.0.27",
+ "@emotion/react": "11.1.1",
+ "@emotion/styled": "11.0.0",
"@flopflip/launchdarkly-adapter": "2.15.7",
"@flopflip/types": "2.5.10",
"@flopflip/memory-adapter": "1.9.7",
diff --git a/packages/application-shell/src/components/app-bar/app-bar.tsx b/packages/application-shell/src/components/app-bar/app-bar.tsx
index 22c7a26eb0..4d8353c7f0 100644
--- a/packages/application-shell/src/components/app-bar/app-bar.tsx
+++ b/packages/application-shell/src/components/app-bar/app-bar.tsx
@@ -3,7 +3,7 @@ import type { TApplicationsMenu } from '../../types/generated/proxy';
import React from 'react';
import { Link } from 'react-router-dom';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import Spacings from '@commercetools-uikit/spacings';
import { customProperties } from '@commercetools-uikit/design-system';
import LogoSVG from '@commercetools-frontend/assets/images/logo.svg';
diff --git a/packages/application-shell/src/components/application-loader/application-loader.tsx b/packages/application-shell/src/components/application-loader/application-loader.tsx
index fd5adc7d79..b92af1dd0c 100644
--- a/packages/application-shell/src/components/application-loader/application-loader.tsx
+++ b/packages/application-shell/src/components/application-loader/application-loader.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import LoadingSpinner from '@commercetools-uikit/loading-spinner';
import { customProperties } from '@commercetools-uikit/design-system';
import CTLogoSVG from '@commercetools-frontend/assets/images/ct-logo.svg';
diff --git a/packages/application-shell/src/components/application-shell/application-shell.tsx b/packages/application-shell/src/components/application-shell/application-shell.tsx
index 3d254503de..d0c54757ac 100644
--- a/packages/application-shell/src/components/application-shell/application-shell.tsx
+++ b/packages/application-shell/src/components/application-shell/application-shell.tsx
@@ -11,7 +11,7 @@ import type { TrackingList } from '../../utils/gtm';
import React from 'react';
import { Redirect, Route, Switch, useLocation } from 'react-router-dom';
import { ApolloClient } from '@apollo/client';
-import { Global, css } from '@emotion/core';
+import { Global, css } from '@emotion/react';
import styled from '@emotion/styled';
import {
joinPaths,
diff --git a/packages/application-shell/src/components/loading-placeholder/loading-placeholder.tsx b/packages/application-shell/src/components/loading-placeholder/loading-placeholder.tsx
index 42d0cacf0c..7a32dbdd0c 100644
--- a/packages/application-shell/src/components/loading-placeholder/loading-placeholder.tsx
+++ b/packages/application-shell/src/components/loading-placeholder/loading-placeholder.tsx
@@ -1,4 +1,4 @@
-import { keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { customProperties } from '@commercetools-uikit/design-system';
diff --git a/packages/application-shell/src/components/locale-switcher/locale-switcher.tsx b/packages/application-shell/src/components/locale-switcher/locale-switcher.tsx
index 4601769763..7261dae371 100644
--- a/packages/application-shell/src/components/locale-switcher/locale-switcher.tsx
+++ b/packages/application-shell/src/components/locale-switcher/locale-switcher.tsx
@@ -2,7 +2,7 @@ import type { SingleValueProps } from 'react-select';
import React from 'react';
import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import SelectInput from '@commercetools-uikit/select-input';
import { WorldIcon } from '@commercetools-uikit/icons';
import { customProperties } from '@commercetools-uikit/design-system';
diff --git a/packages/application-shell/src/components/portals-container/portals-container.tsx b/packages/application-shell/src/components/portals-container/portals-container.tsx
index 2c37455690..6374d60ca3 100644
--- a/packages/application-shell/src/components/portals-container/portals-container.tsx
+++ b/packages/application-shell/src/components/portals-container/portals-container.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import { PORTALS_CONTAINER_ID } from '@commercetools-frontend/constants';
// This is used so we can render all overlays inside here
diff --git a/packages/application-shell/src/components/project-switcher/project-switcher.tsx b/packages/application-shell/src/components/project-switcher/project-switcher.tsx
index fa607bdb8d..a06a5ae56d 100644
--- a/packages/application-shell/src/components/project-switcher/project-switcher.tsx
+++ b/packages/application-shell/src/components/project-switcher/project-switcher.tsx
@@ -8,7 +8,7 @@ import type {
import React from 'react';
import memoize from 'memoize-one';
import { FormattedMessage, useIntl } from 'react-intl';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
import { reportErrorToSentry } from '@commercetools-frontend/sentry';
import SelectInput from '@commercetools-uikit/select-input';
diff --git a/packages/application-shell/src/components/quick-access/butler-command/butler-command.tsx b/packages/application-shell/src/components/quick-access/butler-command/butler-command.tsx
index c7eac86fe8..da93c16391 100644
--- a/packages/application-shell/src/components/quick-access/butler-command/butler-command.tsx
+++ b/packages/application-shell/src/components/quick-access/butler-command/butler-command.tsx
@@ -3,7 +3,7 @@ import type { Command } from '../types';
import React from 'react';
import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import { AngleThinRightIcon } from '@commercetools-uikit/icons';
import { customProperties } from '@commercetools-uikit/design-system';
diff --git a/packages/application-shell/src/components/quick-access/butler/butler.tsx b/packages/application-shell/src/components/quick-access/butler/butler.tsx
index 59c37e3d21..6b7c5a0804 100644
--- a/packages/application-shell/src/components/quick-access/butler/butler.tsx
+++ b/packages/application-shell/src/components/quick-access/butler/butler.tsx
@@ -17,7 +17,7 @@ import React from 'react';
import Fuse from 'fuse.js';
import { FormattedMessage, useIntl } from 'react-intl';
import last from 'lodash/last';
-import { css, keyframes, ClassNames } from '@emotion/core';
+import { css, keyframes, ClassNames } from '@emotion/react';
import LoadingSpinner from '@commercetools-uikit/loading-spinner';
import { SearchIcon } from '@commercetools-uikit/icons';
import { customProperties } from '@commercetools-uikit/design-system';
diff --git a/packages/application-shell/src/components/redirect-to-project-create/redirect-to-project-create.tsx b/packages/application-shell/src/components/redirect-to-project-create/redirect-to-project-create.tsx
index 5730084128..ee439d6c56 100644
--- a/packages/application-shell/src/components/redirect-to-project-create/redirect-to-project-create.tsx
+++ b/packages/application-shell/src/components/redirect-to-project-create/redirect-to-project-create.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import Spacings from '@commercetools-uikit/spacings';
import { ContentNotification } from '@commercetools-uikit/notifications';
import Text from '@commercetools-uikit/text';
diff --git a/packages/application-shell/src/components/user-settings-menu/user-settings-menu.tsx b/packages/application-shell/src/components/user-settings-menu/user-settings-menu.tsx
index 83edfb52d1..1e0e126380 100644
--- a/packages/application-shell/src/components/user-settings-menu/user-settings-menu.tsx
+++ b/packages/application-shell/src/components/user-settings-menu/user-settings-menu.tsx
@@ -8,7 +8,7 @@ import type {
import React from 'react';
import { Link } from 'react-router-dom';
import { useIntl, FormattedMessage } from 'react-intl';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import styled from '@emotion/styled';
import Downshift from 'downshift';
import { ToggleFeature } from '@flopflip/react-broadcast';
diff --git a/packages/application-shell/src/index.ts b/packages/application-shell/src/index.ts
index a5feff54f9..faa047ab73 100644
--- a/packages/application-shell/src/index.ts
+++ b/packages/application-shell/src/index.ts
@@ -1,6 +1,17 @@
/**
- * THIS IS THE MODULE ENTRY POINT!
+ * https://emotion.sh/docs/emotion-11#css-prop-types
+ *
+ * However, if you are stuck with older version of TypeScript or using the
+ * classic runtime implicitly by using our `@emotion/babel-preset-css-prop`
+ * then it’s not possible to leverage `css` prop support being added conditionally
+ * based on a type of rendered component.
+ * For those cases we have added a special file that can be imported once
+ * to add support for the `css` prop globally, for all components.
+ *
+ * TODO: remove this once we switch to automatic jsx runtime
*/
+///
+
export { default as ApplicationShell } from './components/application-shell';
export { default as ApplicationShellProvider } from './components/application-shell-provider';
export { default as createApolloClient } from './configure-apollo';
diff --git a/packages/babel-preset-mc-app/index.js b/packages/babel-preset-mc-app/index.js
index e50ff7d423..aff8a09c36 100644
--- a/packages/babel-preset-mc-app/index.js
+++ b/packages/babel-preset-mc-app/index.js
@@ -61,7 +61,7 @@ module.exports = function getBabePresetConfigForMcApp(api, opts = {}) {
// behavior for any plugins that require one.
...(opts.runtime === 'automatic'
? // https://emotion.sh/docs/css-prop#babel-preset
- { importSource: '@emotion/core' }
+ { importSource: '@emotion/react' }
: { useBuiltIns: true }),
runtime: opts.runtime || 'classic',
},
diff --git a/packages/babel-preset-mc-app/package.json b/packages/babel-preset-mc-app/package.json
index 1f41689f86..af385a453b 100644
--- a/packages/babel-preset-mc-app/package.json
+++ b/packages/babel-preset-mc-app/package.json
@@ -35,8 +35,8 @@
"@babel/preset-typescript": "7.12.1",
"@babel/runtime": "7.12.5",
"@babel/runtime-corejs3": "7.12.5",
- "@emotion/babel-preset-css-prop": "10.2.1",
- "babel-plugin-emotion": "10.0.33",
+ "@emotion/babel-preset-css-prop": "11.0.0",
+ "babel-plugin-emotion": "11.0.0",
"babel-plugin-dev-expression": "0.2.2",
"babel-plugin-macros": "2.8.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
diff --git a/packages/react-notifications/package.json b/packages/react-notifications/package.json
index 405dfabcfb..6a0b20ba7a 100644
--- a/packages/react-notifications/package.json
+++ b/packages/react-notifications/package.json
@@ -38,8 +38,8 @@
"@commercetools-uikit/icon-button": "^10.40.0",
"@commercetools-uikit/icons": "^10.40.1",
"@commercetools-uikit/spacings": "^10.40.0",
- "@emotion/core": "10.1.1",
- "@emotion/styled": "10.0.27",
+ "@emotion/react": "11.1.1",
+ "@emotion/styled": "11.0.0",
"@types/history": "^4.7.6",
"@types/lodash": "^4.14.155",
"@types/prop-types": "^15.7.3",
diff --git a/packages/react-notifications/src/components/notification/notification.styles.ts b/packages/react-notifications/src/components/notification/notification.styles.ts
index 96cf159138..e19670b612 100644
--- a/packages/react-notifications/src/components/notification/notification.styles.ts
+++ b/packages/react-notifications/src/components/notification/notification.styles.ts
@@ -3,7 +3,7 @@ import type {
TAppNotificationDomain,
} from '@commercetools-frontend/constants';
-import { css, keyframes } from '@emotion/core';
+import { css, keyframes } from '@emotion/react';
import { customProperties } from '@commercetools-uikit/design-system';
import {
NOTIFICATION_DOMAINS,
diff --git a/packages/react-notifications/src/components/notifications-list/notifications-list.styles.ts b/packages/react-notifications/src/components/notifications-list/notifications-list.styles.ts
index 1e09e2f278..339d52dad1 100644
--- a/packages/react-notifications/src/components/notifications-list/notifications-list.styles.ts
+++ b/packages/react-notifications/src/components/notifications-list/notifications-list.styles.ts
@@ -1,6 +1,6 @@
import type { TAppNotificationDomain } from '@commercetools-frontend/constants';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import { customProperties } from '@commercetools-uikit/design-system';
import { NOTIFICATION_DOMAINS } from '@commercetools-frontend/constants';
diff --git a/packages/react-notifications/src/index.ts b/packages/react-notifications/src/index.ts
index aa4da3b9e0..a3ce6caa87 100644
--- a/packages/react-notifications/src/index.ts
+++ b/packages/react-notifications/src/index.ts
@@ -1,3 +1,17 @@
+/**
+ * https://emotion.sh/docs/emotion-11#css-prop-types
+ *
+ * However, if you are stuck with older version of TypeScript or using the
+ * classic runtime implicitly by using our `@emotion/babel-preset-css-prop`
+ * then it’s not possible to leverage `css` prop support being added conditionally
+ * based on a type of rendered component.
+ * For those cases we have added a special file that can be imported once
+ * to add support for the `css` prop globally, for all components.
+ *
+ * TODO: remove this once we switch to automatic jsx runtime
+ */
+///
+
import type { TProps as MapNotificationToComponentProps } from './components/map-notification-to-component';
// Re-export type for convenience
diff --git a/tsconfig.json b/tsconfig.json
index d32c1ead57..680b6b64e3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,10 +8,7 @@
// See https://devblogs.microsoft.com/typescript/typescript-and-babel-7/
"isolatedModules": true,
"jsx": "react",
- "lib": [
- "ESNext",
- "DOM"
- ],
+ "lib": ["ESNext", "DOM"],
"module": "ESNext",
"moduleResolution": "Node",
"noFallthroughCasesInSwitch": true,
@@ -33,15 +30,9 @@
"baseUrl": ".",
// https://stackoverflow.com/a/40326719
"paths": {
- "*": [
- "@types/*",
- "*"
- ]
+ "*": ["@types/*", "*"]
},
- "typeRoots": [
- "@types",
- "node_modules/@types"
- ]
+ "typeRoots": ["@types", "node_modules/@types"]
},
"include": [
"jest.d.ts",
@@ -49,8 +40,5 @@
"**/*.spec.ts",
"**/*.spec.tsx"
],
- "exclude": [
- "**/node_modules",
- "**/dist/**/*"
- ]
-}
\ No newline at end of file
+ "exclude": ["**/node_modules", "**/dist/**/*"]
+}
diff --git a/visual-testing-app/package.json b/visual-testing-app/package.json
index e1e9fd2d63..71ad2a8b34 100644
--- a/visual-testing-app/package.json
+++ b/visual-testing-app/package.json
@@ -21,8 +21,8 @@
"@commercetools-uikit/text": "10.40.0",
"@commercetools-uikit/text-field": "10.40.1",
"@commercetools-uikit/text-input": "10.40.1",
- "@emotion/core": "10.1.1",
- "@emotion/styled": "10.0.27",
+ "@emotion/react": "11.1.1",
+ "@emotion/styled": "11.0.0",
"formik": "2.2.5",
"react": "16.14.0",
"react-dom": "16.14.0",
diff --git a/visual-testing-app/src/index.tsx b/visual-testing-app/src/index.tsx
index a7e144dee5..f5a70611ef 100644
--- a/visual-testing-app/src/index.tsx
+++ b/visual-testing-app/src/index.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import { css, Global } from '@emotion/core';
+import { css, Global } from '@emotion/react';
import Application from './application';
ReactDOM.render(
diff --git a/website-components-playground/package.json b/website-components-playground/package.json
index 786c9ad154..c1907f391c 100644
--- a/website-components-playground/package.json
+++ b/website-components-playground/package.json
@@ -22,8 +22,8 @@
"@commercetools-uikit/text": "10.40.0",
"@commercetools-uikit/text-field": "10.40.1",
"@commercetools-uikit/text-input": "10.40.1",
- "@emotion/core": "10.1.1",
- "@emotion/styled": "10.0.27",
+ "@emotion/react": "11.1.1",
+ "@emotion/styled": "11.0.0",
"core-js": "3.7.0",
"fontsource-open-sans": "3.0.9",
"formik": "2.2.5",
diff --git a/website-components-playground/src/components/modal-controller.js b/website-components-playground/src/components/modal-controller.js
index 0dbd8746ae..af8299ee2c 100644
--- a/website-components-playground/src/components/modal-controller.js
+++ b/website-components-playground/src/components/modal-controller.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import styled from '@emotion/styled';
import Spacings from '@commercetools-uikit/spacings';
import Text from '@commercetools-uikit/text';
diff --git a/website-components-playground/src/layouts/layout-app.js b/website-components-playground/src/layouts/layout-app.js
index 15019139f2..92eb509922 100644
--- a/website-components-playground/src/layouts/layout-app.js
+++ b/website-components-playground/src/layouts/layout-app.js
@@ -4,7 +4,7 @@ import 'fontsource-open-sans/latin-600.css';
import 'fontsource-open-sans/latin-700.css';
import React from 'react';
import PropTypes from 'prop-types';
-import { css, Global } from '@emotion/core';
+import { css, Global } from '@emotion/react';
import { customProperties } from '@commercetools-uikit/design-system';
import useWindowHeight from '../hooks/use-window-height';
diff --git a/website/package.json b/website/package.json
index be99d63120..88cfb26968 100644
--- a/website/package.json
+++ b/website/package.json
@@ -16,8 +16,8 @@
"@commercetools-uikit/card": "10.40.0",
"@commercetools-uikit/spacings-inline": "10.40.0",
"@commercetools-uikit/spacings-stack": "10.40.0",
- "@emotion/core": "10.1.1",
- "@emotion/styled": "10.0.27",
+ "@emotion/react": "11.1.1",
+ "@emotion/styled": "11.0.0",
"gatsby": "2.26.1",
"gatsby-cli": "2.13.1",
"react": "16.14.0",
diff --git a/website/src/@commercetools-docs/gatsby-theme-docs/overrides/page-header-side.js b/website/src/@commercetools-docs/gatsby-theme-docs/overrides/page-header-side.js
index 4b9d6ddef8..c68020e68c 100644
--- a/website/src/@commercetools-docs/gatsby-theme-docs/overrides/page-header-side.js
+++ b/website/src/@commercetools-docs/gatsby-theme-docs/overrides/page-header-side.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import { useSiteData, Link } from '@commercetools-docs/gatsby-theme-docs';
import { designSystem } from '@commercetools-docs/ui-kit';
import SpacingsInline from '@commercetools-uikit/spacings-inline';
diff --git a/website/src/components/links-card.js b/website/src/components/links-card.js
index f5211742ef..128d07ece8 100644
--- a/website/src/components/links-card.js
+++ b/website/src/components/links-card.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { Link } from '@commercetools-docs/gatsby-theme-docs';
import { designSystem } from '@commercetools-docs/ui-kit';
diff --git a/website/src/content/development/styling.mdx b/website/src/content/development/styling.mdx
index 3e7a6e2bb2..5f1c59190d 100644
--- a/website/src/content/development/styling.mdx
+++ b/website/src/content/development/styling.mdx
@@ -31,7 +31,7 @@ If you use CSS Modules, the Design Tokens are already available in scope (via Po
If you use CSS-in-JS, the Design Tokens can be imported from the `customProperties` export:
```js
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
import { customProperties } from '@commercetools-uikit/design-system';
const styles = css`
diff --git a/yarn.lock b/yarn.lock
index 69087e49c3..d6b0961533 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -254,7 +254,7 @@
dependencies:
"@babel/types" "^7.12.1"
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.0.0-beta.49", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.5":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.0.0-beta.49", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.5", "@babel/helper-module-imports@^7.7.0":
version "7.12.5"
resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb"
integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==
@@ -2752,7 +2752,35 @@
dependencies:
"@babel/plugin-syntax-jsx" "^7.2.0"
-"@emotion/babel-preset-css-prop@10.2.1", "@emotion/babel-preset-css-prop@^10.0.27":
+"@emotion/babel-plugin@^11.0.0":
+ version "11.0.0"
+ resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.0.0.tgz#e6f40fa81ef52775773a53d50220c597ebc5c2ef"
+ integrity sha512-w3YP0jlqrNwBBaSI6W+r80fOKF6l9QmsPfLNx5YWSHwrxjVZhM+L50gY7YCVAvlfr1/qdD1vsFN+PDZmLvt42Q==
+ dependencies:
+ "@babel/helper-module-imports" "^7.7.0"
+ "@babel/plugin-syntax-jsx" "^7.12.1"
+ "@babel/runtime" "^7.7.2"
+ "@emotion/hash" "^0.8.0"
+ "@emotion/memoize" "^0.7.4"
+ "@emotion/serialize" "^1.0.0"
+ 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"
+
+"@emotion/babel-preset-css-prop@11.0.0":
+ version "11.0.0"
+ resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-11.0.0.tgz#25b868affa620b9e97024b67f67ad32c03a0510e"
+ integrity sha512-E7z3jMf1OyThGpp3ngYGxOSGX5AdoSQTuqM9QgJNAHFh3Fi8N5CbWx6g+IdySJ8bjPiMgFQsIeEhkyy+4mDpCQ==
+ dependencies:
+ "@babel/plugin-transform-react-jsx" "^7.12.1"
+ "@babel/runtime" "^7.7.2"
+ "@emotion/babel-plugin" "^11.0.0"
+ "@emotion/babel-plugin-jsx-pragmatic" "^0.1.5"
+
+"@emotion/babel-preset-css-prop@^10.0.27":
version "10.2.1"
resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-10.2.1.tgz#fb331355c1819367a6e5dd171879ae4957aa701a"
integrity sha512-4hudLJCfIrbpJZek5n69cwzu7GgCamza/whh/RgqXaI5ZWT8pFj1rR2KjQntzFFzTU7l9o+jdVPSpgCbrVG+VQ==
@@ -2773,7 +2801,18 @@
"@emotion/utils" "0.11.3"
"@emotion/weak-memoize" "0.2.5"
-"@emotion/core@10.1.1", "@emotion/core@^10.0.34", "@emotion/core@^10.0.9":
+"@emotion/cache@^11.0.0":
+ version "11.0.0"
+ resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.0.0.tgz#473adcaf9e04c6a0e30fb1421e79a209a96818f8"
+ integrity sha512-NStfcnLkL5vj3mBILvkR2m/5vFxo3G0QEreYKDGHNHm9IMYoT/t3j6xwjx6lMI/S1LUJfVHQqn0m9wSINttTTQ==
+ dependencies:
+ "@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@^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==
@@ -2794,7 +2833,7 @@
"@emotion/utils" "0.11.3"
babel-plugin-emotion "^10.0.27"
-"@emotion/hash@0.8.0":
+"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0":
version "0.8.0"
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
@@ -2806,11 +2845,31 @@
dependencies:
"@emotion/memoize" "0.7.4"
-"@emotion/memoize@0.7.4":
+"@emotion/is-prop-valid@^1.0.0":
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.0.0.tgz#1dbe82e52a12c065d416a702e2d106e552cde5be"
+ integrity sha512-G5X0t7eR9pkhUvAY32QS3lToP9JyNF8It5CcmMvbWjmC9/Yq7IhevaKqxl+me2BKR93iTPiL/h3En1ZX/1G3PQ==
+ dependencies:
+ "@emotion/memoize" "^0.7.4"
+
+"@emotion/memoize@0.7.4", "@emotion/memoize@^0.7.4":
version "0.7.4"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+"@emotion/react@11.1.1":
+ version "11.1.1"
+ resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.1.1.tgz#4b304d494af321b0179e6763830e07cf674f0423"
+ integrity sha512-otA0Np8OnOeU9ChkOS9iuLB6vIxiM+bJiU0id33CsQn3R2Pk9ijVHnxevENIKV/P2S7AhrD8cFbUGysEciWlEA==
+ dependencies:
+ "@babel/runtime" "^7.7.2"
+ "@emotion/cache" "^11.0.0"
+ "@emotion/serialize" "^1.0.0"
+ "@emotion/sheet" "^1.0.0"
+ "@emotion/utils" "^1.0.0"
+ "@emotion/weak-memoize" "^0.2.5"
+ hoist-non-react-statics "^3.3.1"
+
"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
version "0.11.16"
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
@@ -2822,11 +2881,27 @@
"@emotion/utils" "0.11.3"
csstype "^2.5.7"
+"@emotion/serialize@^1.0.0":
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.0.tgz#1a61f4f037cf39995c97fc80ebe99abc7b191ca9"
+ integrity sha512-zt1gm4rhdo5Sry8QpCOpopIUIKU+mUSpV9WNmFILUraatm5dttNEaYzUWWSboSMUE6PtN2j1cAsuvcugfdI3mw==
+ 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"
+
"@emotion/sheet@0.9.4":
version "0.9.4"
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
+"@emotion/sheet@^1.0.0":
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.0.tgz#a0ef06080f339477ad4ba7f56e1c931f7ba50822"
+ integrity sha512-cdCHfZtf/0rahPDCZ9zyq+36EqfD/6c0WUqTFZ/hv9xadTUv2lGE5QK7/Z6Dnx2oRxC0usfVM2/BYn9q9B9wZA==
+
"@emotion/styled-base@^10.0.27", "@emotion/styled-base@^10.0.31":
version "10.0.31"
resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a"
@@ -2837,7 +2912,18 @@
"@emotion/serialize" "^0.11.15"
"@emotion/utils" "0.11.3"
-"@emotion/styled@10.0.27", "@emotion/styled@^10.0.27":
+"@emotion/styled@11.0.0":
+ version "11.0.0"
+ resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.0.0.tgz#698196c2822746360a8644a73a5d842b2d1a78a5"
+ integrity sha512-498laccxJlBiJqrr2r/fx9q+Pr55D0URP2UyOkoSGLjevb8LLAFWueqthsQ5XijE66iGo7y3rzzEYdA7CHmZEQ==
+ dependencies:
+ "@babel/runtime" "^7.7.2"
+ "@emotion/babel-plugin" "^11.0.0"
+ "@emotion/is-prop-valid" "^1.0.0"
+ "@emotion/serialize" "^1.0.0"
+ "@emotion/utils" "^1.0.0"
+
+"@emotion/styled@^10.0.27":
version "10.0.27"
resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==
@@ -2850,7 +2936,7 @@
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
-"@emotion/unitless@0.7.5":
+"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.5":
version "0.7.5"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@@ -2860,7 +2946,12 @@
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
-"@emotion/weak-memoize@0.2.5":
+"@emotion/utils@^1.0.0":
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
+ integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
+
+"@emotion/weak-memoize@0.2.5", "@emotion/weak-memoize@^0.2.5":
version "0.2.5"
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
@@ -7691,7 +7782,12 @@ babel-plugin-dynamic-import-node@^2.3.3:
dependencies:
object.assign "^4.1.0"
-babel-plugin-emotion@10.0.33, babel-plugin-emotion@^10.0.27:
+babel-plugin-emotion@11.0.0:
+ version "11.0.0"
+ resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-11.0.0.tgz#f362c9fe05493821ab8995cd5a8e7be6504b73a9"
+ integrity sha512-cVD32sIXlidaqQBr7vw0uD2o58uBeD8jILDJ2yAGT1fOmgYcE5iX27bTVMV6meiUZarIAh1iAyTqrEWV+V2dqQ==
+
+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==
@@ -7763,7 +7859,7 @@ babel-plugin-lodash@3.3.4:
lodash "^4.17.10"
require-package-name "^2.0.1"
-babel-plugin-macros@2.8.0, babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.8.0:
+babel-plugin-macros@2.8.0, babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.6.1, babel-plugin-macros@^2.8.0:
version "2.8.0"
resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
@@ -15175,7 +15271,7 @@ hogan.js@^3.0.2:
mkdirp "0.3.0"
nopt "1.0.10"
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -26005,6 +26101,11 @@ stylelint@13.7.2:
v8-compile-cache "^2.1.1"
write-file-atomic "^3.0.3"
+stylis@^4.0.3:
+ version "4.0.3"
+ resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.3.tgz#0d714765f3f694a685550f0c45411ebf90a9bded"
+ integrity sha512-iAxdFyR9cHKp4H5M2dJlDnvcb/3TvPprzlKjvYVbH7Sh+y8hjY/mUu/ssdcvVz6Z4lKI3vsoS0jAkMYmX7ozfA==
+
subscriptions-transport-ws@0.9.18:
version "0.9.18"
resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.18.tgz#bcf02320c911fbadb054f7f928e51c6041a37b97"