diff --git a/babel.config.js b/babel.config.js index 02566a3a2..de742bff9 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,4 +1,6 @@ /** + * Babel configuration for Next.js + * * @see https://nextjs.org/docs/advanced-features/customizing-babel-config Official doc reference v10 * @see https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts You can take a look at this file to learn about the presets included by next/babel. * @see https://emotion.sh/docs/css-prop##babel-preset Configuring Emotion 11 diff --git a/src/components/ComponentTemplate.tsx b/src/components/ComponentTemplate.tsx index cd2fe5e56..9c4e6520d 100644 --- a/src/components/ComponentTemplate.tsx +++ b/src/components/ComponentTemplate.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import React from 'react'; import Text from './utils/Text'; diff --git a/src/components/animations/Loader.tsx b/src/components/animations/Loader.tsx index d9fa32793..d92d7ff74 100644 --- a/src/components/animations/Loader.tsx +++ b/src/components/animations/Loader.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import React from 'react'; import AnimatedLoader from '../svg/AnimatedLoader'; diff --git a/src/components/appBootstrap/BrowserPageBootstrap.tsx b/src/components/appBootstrap/BrowserPageBootstrap.tsx index dfb09f1c4..ef3d524cf 100644 --- a/src/components/appBootstrap/BrowserPageBootstrap.tsx +++ b/src/components/appBootstrap/BrowserPageBootstrap.tsx @@ -5,7 +5,7 @@ import { import * as Sentry from '@sentry/node'; import { createLogger } from '@unly/utils-simple-logger'; import { AmplitudeClient } from 'amplitude-js'; -import { useTheme } from 'emotion-theming'; +import { useTheme } from '@emotion/react'; import React from 'react'; import { useTranslation } from 'react-i18next'; import useCustomer from '../../hooks/useCustomer'; diff --git a/src/components/appBootstrap/MultiversalAppBootstrap.tsx b/src/components/appBootstrap/MultiversalAppBootstrap.tsx index d627d2621..f33eaafd5 100644 --- a/src/components/appBootstrap/MultiversalAppBootstrap.tsx +++ b/src/components/appBootstrap/MultiversalAppBootstrap.tsx @@ -1,7 +1,7 @@ import * as Sentry from '@sentry/node'; import { isBrowser } from '@unly/utils'; import { createLogger } from '@unly/utils-simple-logger'; -import { ThemeProvider } from 'emotion-theming'; +import { ThemeProvider } from '@emotion/react'; import { i18n } from 'i18next'; import find from 'lodash.find'; import includes from 'lodash.includes'; diff --git a/src/components/appBootstrap/MultiversalGlobalStyles.tsx b/src/components/appBootstrap/MultiversalGlobalStyles.tsx index 3eba23446..e6e005431 100644 --- a/src/components/appBootstrap/MultiversalGlobalStyles.tsx +++ b/src/components/appBootstrap/MultiversalGlobalStyles.tsx @@ -1,7 +1,7 @@ import { css, Global, -} from '@emotion/core'; +} from '@emotion/react'; import React from 'react'; import { NRN_DEFAULT_FALLBACK_FONTS } from '../../constants'; import { CustomerTheme } from '../../types/data/CustomerTheme'; diff --git a/src/components/data/ProductRow.tsx b/src/components/data/ProductRow.tsx index c1764c707..739a82881 100644 --- a/src/components/data/ProductRow.tsx +++ b/src/components/data/ProductRow.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import React from 'react'; import { Col, diff --git a/src/components/data/Products.tsx b/src/components/data/Products.tsx index 7d22e3957..572ed563a 100644 --- a/src/components/data/Products.tsx +++ b/src/components/data/Products.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import map from 'lodash.map'; import React from 'react'; import { Container } from 'reactstrap'; diff --git a/src/components/doc/DocPage.tsx b/src/components/doc/DocPage.tsx index ca625cd05..be49ea010 100644 --- a/src/components/doc/DocPage.tsx +++ b/src/components/doc/DocPage.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import React, { ReactNode } from 'react'; type Props = { diff --git a/src/components/doc/DocSection.tsx b/src/components/doc/DocSection.tsx index f0082a4de..737fe00ae 100644 --- a/src/components/doc/DocSection.tsx +++ b/src/components/doc/DocSection.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import React, { ReactNode } from 'react'; type Props = { diff --git a/src/components/doc/IntroductionSection.tsx b/src/components/doc/IntroductionSection.tsx index 7ca853635..628bb8208 100644 --- a/src/components/doc/IntroductionSection.tsx +++ b/src/components/doc/IntroductionSection.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import React from 'react'; import { Alert, diff --git a/src/components/doc/SidebarFooter.tsx b/src/components/doc/SidebarFooter.tsx index 0a0082592..371ee6b2f 100644 --- a/src/components/doc/SidebarFooter.tsx +++ b/src/components/doc/SidebarFooter.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/src/components/doc/SidebarToggle.tsx b/src/components/doc/SidebarToggle.tsx index 756b63b8f..8610ad85b 100644 --- a/src/components/doc/SidebarToggle.tsx +++ b/src/components/doc/SidebarToggle.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React from 'react'; diff --git a/src/components/errors/DefaultErrorLayout.tsx b/src/components/errors/DefaultErrorLayout.tsx index 55e674909..1cac16429 100644 --- a/src/components/errors/DefaultErrorLayout.tsx +++ b/src/components/errors/DefaultErrorLayout.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import * as Sentry from '@sentry/node'; import * as React from 'react'; import { Button } from 'reactstrap'; diff --git a/src/components/errors/ErrorDebug.tsx b/src/components/errors/ErrorDebug.tsx index 030925061..9f56bb655 100644 --- a/src/components/errors/ErrorDebug.tsx +++ b/src/components/errors/ErrorDebug.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import * as React from 'react'; import { Fragment } from 'react'; diff --git a/src/components/pageLayouts/DefaultPageContainer.tsx b/src/components/pageLayouts/DefaultPageContainer.tsx index 5906065e7..479d979a7 100644 --- a/src/components/pageLayouts/DefaultPageContainer.tsx +++ b/src/components/pageLayouts/DefaultPageContainer.tsx @@ -1,6 +1,6 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import classnames from 'classnames'; -import { useTheme } from 'emotion-theming'; +import { useTheme } from '@emotion/react'; import React from 'react'; import { Container } from 'reactstrap'; diff --git a/src/components/pageLayouts/Footer.tsx b/src/components/pageLayouts/Footer.tsx index 2dd4327f5..342389f5f 100644 --- a/src/components/pageLayouts/Footer.tsx +++ b/src/components/pageLayouts/Footer.tsx @@ -1,5 +1,5 @@ -import { css } from '@emotion/core'; -import { useTheme } from 'emotion-theming'; +import { css } from '@emotion/react'; +import { useTheme } from '@emotion/react'; import React from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/src/components/pageLayouts/Nav.tsx b/src/components/pageLayouts/Nav.tsx index 612fc976c..783604b7d 100644 --- a/src/components/pageLayouts/Nav.tsx +++ b/src/components/pageLayouts/Nav.tsx @@ -1,8 +1,8 @@ import { Amplitude } from '@amplitude/react-amplitude'; -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import classnames from 'classnames'; -import { useTheme } from 'emotion-theming'; +import { useTheme } from '@emotion/react'; import kebabCase from 'lodash.kebabcase'; import map from 'lodash.map'; import { diff --git a/src/components/pageLayouts/PreviewModeBanner.tsx b/src/components/pageLayouts/PreviewModeBanner.tsx index 2ad820e4b..5a8d07d02 100644 --- a/src/components/pageLayouts/PreviewModeBanner.tsx +++ b/src/components/pageLayouts/PreviewModeBanner.tsx @@ -1,6 +1,6 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { useTheme } from 'emotion-theming'; +import { useTheme } from '@emotion/react'; import { NextRouter, useRouter, diff --git a/src/components/pageLayouts/QuickPreviewBanner.tsx b/src/components/pageLayouts/QuickPreviewBanner.tsx index 6b8305701..a3fde7e7e 100644 --- a/src/components/pageLayouts/QuickPreviewBanner.tsx +++ b/src/components/pageLayouts/QuickPreviewBanner.tsx @@ -1,7 +1,7 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { createLogger } from '@unly/utils-simple-logger'; -import { useTheme } from 'emotion-theming'; +import { useTheme } from '@emotion/react'; import { NextRouter, useRouter, diff --git a/src/components/pageLayouts/QuickPreviewLayout.tsx b/src/components/pageLayouts/QuickPreviewLayout.tsx index 3497ebb16..0d013ae3b 100644 --- a/src/components/pageLayouts/QuickPreviewLayout.tsx +++ b/src/components/pageLayouts/QuickPreviewLayout.tsx @@ -2,7 +2,7 @@ import { Amplitude, LogOnMount, } from '@amplitude/react-amplitude'; -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { createLogger } from '@unly/utils-simple-logger'; import React from 'react'; import { Container } from 'reactstrap'; diff --git a/src/components/utils/Btn.tsx b/src/components/utils/Btn.tsx index bb1e5b362..747b82127 100644 --- a/src/components/utils/Btn.tsx +++ b/src/components/utils/Btn.tsx @@ -1,6 +1,6 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import classnames from 'classnames'; -import { useTheme } from 'emotion-theming'; +import { useTheme } from '@emotion/react'; import React, { ReactNode } from 'react'; import { CustomerTheme } from '../../types/data/CustomerTheme'; import { ReactButtonProps } from '../../types/react/ReactButtonProps'; diff --git a/src/components/utils/Buttons.tsx b/src/components/utils/Buttons.tsx index 214722edb..e5fe7cbec 100644 --- a/src/components/utils/Buttons.tsx +++ b/src/components/utils/Buttons.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import React, { Fragment } from 'react'; import { Row } from 'reactstrap'; import Btn from './Btn'; diff --git a/src/components/utils/Cards.tsx b/src/components/utils/Cards.tsx index e69dcf2ae..38ed70328 100644 --- a/src/components/utils/Cards.tsx +++ b/src/components/utils/Cards.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import classnames from 'classnames'; import React, { ReactNode } from 'react'; import { CardDeck } from 'reactstrap'; diff --git a/src/components/utils/CircleBtn.tsx b/src/components/utils/CircleBtn.tsx index 37fd1e81b..383afa4ce 100644 --- a/src/components/utils/CircleBtn.tsx +++ b/src/components/utils/CircleBtn.tsx @@ -1,5 +1,5 @@ -import { css } from '@emotion/core'; -import { useTheme } from 'emotion-theming'; +import { css } from '@emotion/react'; +import { useTheme } from '@emotion/react'; import React from 'react'; import { CustomerTheme } from '../../types/data/CustomerTheme'; import { ReactDivProps } from '../../types/react/ReactDivProps'; diff --git a/src/components/utils/EllipsisText.tsx b/src/components/utils/EllipsisText.tsx index 5297968ce..ab1ec0f94 100644 --- a/src/components/utils/EllipsisText.tsx +++ b/src/components/utils/EllipsisText.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import React, { ReactNode } from 'react'; type Props = { diff --git a/src/components/utils/LanguageSelector.tsx b/src/components/utils/LanguageSelector.tsx index bde9b060a..1f54d5c58 100644 --- a/src/components/utils/LanguageSelector.tsx +++ b/src/components/utils/LanguageSelector.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import React from 'react'; type Props = {} diff --git a/src/components/utils/LegalContent.tsx b/src/components/utils/LegalContent.tsx index 9dcb4e540..fef157894 100644 --- a/src/components/utils/LegalContent.tsx +++ b/src/components/utils/LegalContent.tsx @@ -1,5 +1,5 @@ -import { css } from '@emotion/core'; -import { useTheme } from 'emotion-theming'; +import { css } from '@emotion/react'; +import { useTheme } from '@emotion/react'; import React from 'react'; import { Container } from 'reactstrap'; import { CustomerTheme } from '../../types/data/CustomerTheme'; diff --git a/src/components/utils/Stamp.tsx b/src/components/utils/Stamp.tsx index d8b32d62d..ef0ef1530 100644 --- a/src/components/utils/Stamp.tsx +++ b/src/components/utils/Stamp.tsx @@ -1,5 +1,5 @@ -import { css } from '@emotion/core'; -import { useTheme } from 'emotion-theming'; +import { css } from '@emotion/react'; +import { useTheme } from '@emotion/react'; import React, { ReactNode } from 'react'; import { CustomerTheme } from '../../types/data/CustomerTheme'; diff --git a/src/components/utils/ToggleButton.tsx b/src/components/utils/ToggleButton.tsx index 3ea2049df..91027c392 100644 --- a/src/components/utils/ToggleButton.tsx +++ b/src/components/utils/ToggleButton.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import React from 'react'; type Props = { diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 5a944b797..393864dbb 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { createLogger } from '@unly/utils-simple-logger'; import { diff --git a/src/pages/[locale]/examples/built-in-features/analytics.tsx b/src/pages/[locale]/examples/built-in-features/analytics.tsx index 8868fcabc..11f3f2e63 100644 --- a/src/pages/[locale]/examples/built-in-features/analytics.tsx +++ b/src/pages/[locale]/examples/built-in-features/analytics.tsx @@ -1,5 +1,5 @@ import { Amplitude } from '@amplitude/react-amplitude'; -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { createLogger } from '@unly/utils-simple-logger'; import { GetStaticPaths, diff --git a/src/pages/[locale]/examples/built-in-features/static-i18n.tsx b/src/pages/[locale]/examples/built-in-features/static-i18n.tsx index fa6d6dca7..133ea017f 100644 --- a/src/pages/[locale]/examples/built-in-features/static-i18n.tsx +++ b/src/pages/[locale]/examples/built-in-features/static-i18n.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { createLogger } from '@unly/utils-simple-logger'; import { GetStaticPaths, diff --git a/src/pages/[locale]/examples/built-in-utilities/api.tsx b/src/pages/[locale]/examples/built-in-utilities/api.tsx index 1686c6f49..df946ece8 100644 --- a/src/pages/[locale]/examples/built-in-utilities/api.tsx +++ b/src/pages/[locale]/examples/built-in-utilities/api.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { createLogger } from '@unly/utils-simple-logger'; import { GetStaticPaths, diff --git a/src/pages/[locale]/examples/built-in-utilities/hocs.tsx b/src/pages/[locale]/examples/built-in-utilities/hocs.tsx index 6660653cc..2919a5a21 100644 --- a/src/pages/[locale]/examples/built-in-utilities/hocs.tsx +++ b/src/pages/[locale]/examples/built-in-utilities/hocs.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { createLogger } from '@unly/utils-simple-logger'; import { GetStaticPaths, diff --git a/src/pages/[locale]/examples/built-in-utilities/hooks.tsx b/src/pages/[locale]/examples/built-in-utilities/hooks.tsx index c3ded1c4d..3b93f81eb 100644 --- a/src/pages/[locale]/examples/built-in-utilities/hooks.tsx +++ b/src/pages/[locale]/examples/built-in-utilities/hooks.tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { createLogger } from '@unly/utils-simple-logger'; import { GetStaticPaths, diff --git a/src/pages/[locale]/examples/native-features/example-with-ssg-and-fallback/[albumId].tsx b/src/pages/[locale]/examples/native-features/example-with-ssg-and-fallback/[albumId].tsx index 7f330831e..a2c2f34e3 100644 --- a/src/pages/[locale]/examples/native-features/example-with-ssg-and-fallback/[albumId].tsx +++ b/src/pages/[locale]/examples/native-features/example-with-ssg-and-fallback/[albumId].tsx @@ -1,4 +1,4 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { createLogger } from '@unly/utils-simple-logger'; import deepmerge from 'deepmerge'; import map from 'lodash.map';