fix(deps): update emotion monorepo to v11 (major) (#1876)

* fix(deps): update emotion monorepo to v11

* fix: emotion css prop support for TS

* fix: reference emotion css types in each package

* chore: rebase leftover

* docs: changeset

* docs: adjust comment

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.de>

.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

@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
+ */
+/// <reference types="@emotion/react/types/css-prop" />

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",

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';

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';

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 = {

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';

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 = {

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 = {

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';

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';
 

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,

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';

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
+ */
+/// <reference types="@emotion/react/types/css-prop" />
+
 export { default as version } from './version';
 
 // Maintenance pages

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",

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';

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';

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,

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';
 

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';

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

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';

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';
 

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';

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';

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';

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
  */
+/// <reference types="@emotion/react/types/css-prop" />
+
 export { default as ApplicationShell } from './components/application-shell';
 export { default as ApplicationShellProvider } from './components/application-shell-provider';
 export { default as createApolloClient } from './configure-apollo';

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',
         },

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",

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",

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,

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';
 

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
+ */
+/// <reference types="@emotion/react/types/css-prop" />
+
 import type { TProps as MapNotificationToComponentProps } from './components/map-notification-to-component';
 
 // Re-export type for convenience

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,24 +30,15 @@
     "baseUrl": ".",
     // https://stackoverflow.com/a/40326719
     "paths": {
-      "*": [
-        "@types/*",
-        "*"
-      ]
+      "*": ["@types/*", "*"]
     },
-    "typeRoots": [
-      "@types",
-      "node_modules/@types"
-    ]
+    "typeRoots": ["@types", "node_modules/@types"]
   },
   "include": [
     "jest.d.ts",
     "@types-extensions/*",
     "**/*.spec.ts",
     "**/*.spec.tsx"
   ],
-  "exclude": [
-    "**/node_modules",
-    "**/dist/**/*"
-  ]
-}
+  "exclude": ["**/node_modules", "**/dist/**/*"]
+}

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",

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(

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",

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';