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"