diff --git a/.eslintrc.yml b/.eslintrc.yml index dba60b187..30e7413ce 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -15,6 +15,7 @@ plugins: - jest - react - react-hooks + - '@emotion' parser: '@typescript-eslint/parser' parserOptions: project: ./tsconfig.json @@ -95,6 +96,11 @@ rules: # See https://eslint.org/docs/rules extendDefaults: true types: '{}': false # Allow writing `type Props = {}` - See https://github.com/typescript-eslint/typescript-eslint/issues/2063#issuecomment-632833366 + + # Emotion rules - See https://github.com/emotion-js/emotion/tree/master/packages/eslint-plugin + # Emotion 11 - See https://emotion.sh/docs/emotion-11 + '@emotion/pkg-renaming': error + overrides: - files: ['**/*.tsx'] rules: diff --git a/.github/workflows/deploy-vercel-staging.yml b/.github/workflows/deploy-vercel-staging.yml index 5aeaa7c30..cfa919198 100644 --- a/.github/workflows/deploy-vercel-staging.yml +++ b/.github/workflows/deploy-vercel-staging.yml @@ -398,7 +398,7 @@ jobs: # On E2E failure, add a comment to the PR with additional information, if there is an open PR for the current branch - name: Comment PR (E2E failure) uses: peter-evans/create-or-update-comment@v1 # See https://github.com/peter-evans/create-or-update-comment - if: fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID && success() + if: fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID && failure() with: token: ${{ secrets.GITHUB_TOKEN }} issue-number: ${{ fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID }} diff --git a/babel.config.js b/babel.config.js index 4543bfe32..507d27a27 100644 --- a/babel.config.js +++ b/babel.config.js @@ -5,8 +5,20 @@ * * @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 * @example https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config Next.js official example of customizing Babel */ module.exports = { - presets: ['next/babel', '@emotion/babel-preset-css-prop'], + presets: [ + [ + "next/babel", + { + "preset-react": { + "runtime": "automatic", + "importSource": "@emotion/react" + } + } + ] + ], + plugins: ["@emotion/babel-plugin"], }; diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json index e5079d008..b0ba89e10 100644 --- a/cypress/tsconfig.json +++ b/cypress/tsconfig.json @@ -6,7 +6,6 @@ "exclude": [], "compilerOptions": { "baseUrl": ".", - "jsx": "react", "types": [ "cypress" ], diff --git a/package.json b/package.json index 773b93538..bf2ba91d5 100644 --- a/package.json +++ b/package.json @@ -91,8 +91,8 @@ }, "dependencies": { "@amplitude/react-amplitude": "1.0.0", - "@emotion/core": "10.0.35", - "@emotion/styled": "10.0.27", + "@emotion/react": "11.1.4", + "@emotion/styled": "11.0.0", "@fortawesome/fontawesome-svg-core": "1.2.32", "@fortawesome/free-brands-svg-icons": "5.15.1", "@fortawesome/free-regular-svg-icons": "5.15.1", @@ -113,7 +113,6 @@ "css-to-react-native": "3.0.0", "csstype": "3.0.6", "deepmerge": "4.2.2", - "emotion-theming": "10.0.27", "flatted": "3.1.0", "i18next": "19.8.4", "i18next-locize-backend": "4.1.8", @@ -160,7 +159,7 @@ }, "devDependencies": { "@cypress/react": "4.16.3", - "@emotion/babel-preset-css-prop": "10.0.27", + "@emotion/eslint-plugin": "11.0.0", "@next/bundle-analyzer": "10.0.5", "@svgr/cli": "5.5.0", "@types/amplitude-js": "7.0.0", diff --git a/src/components/ComponentTemplate.tsx b/src/components/ComponentTemplate.tsx index cd2fe5e56..2c63798ae 100644 --- a/src/components/ComponentTemplate.tsx +++ b/src/components/ComponentTemplate.tsx @@ -1,8 +1,6 @@ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import React from 'react'; -import Text from './utils/Text'; - type Props = {} /** @@ -10,17 +8,15 @@ type Props = {} */ const ComponentTemplate: React.FunctionComponent = (props): JSX.Element => { return ( - - {` - This component is a template meant to be duplicated to quickly get started with new React components. - - Feel free to adapt it at your convenience `} - + > + This component is a template meant to be duplicated to quickly get started with new React components.
+
+ Feel free to adapt it at your convenience + ); }; 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..b9679e9c2 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'; @@ -76,7 +76,7 @@ const BrowserPageBootstrap = (props: BrowserPageBootstrapProps): JSX.Element => cookiesManager, userSession, }; - const theme = useTheme(); + const theme = useTheme(); const isCypressRunning = detectCypress(); const isLightHouseRunning = detectLightHouse(); 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 8d81a55ca..6c1d95baa 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'; @@ -28,7 +28,7 @@ const Footer: React.FunctionComponent = (props) => { const customer: Customer = useCustomer(); const { availableLanguages } = customer; const shouldDisplayI18nButton = availableLanguages?.length > 1; - const theme = useTheme(); + const theme = useTheme(); const { backgroundColor, onBackgroundColor, diff --git a/src/components/pageLayouts/Nav.tsx b/src/components/pageLayouts/Nav.tsx index 612fc976c..dd3687d46 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 { @@ -46,7 +46,7 @@ type Props = {}; const Nav: React.FunctionComponent = () => { const { t } = useTranslation(); const router: NextRouter = useRouter(); - const theme = useTheme(); + const theme = useTheme(); const { primaryColor, logo: logoAirtable } = theme; const logo: AirtableAttachment = logoAirtable; const { locale }: I18n = useI18n(); diff --git a/src/components/pageLayouts/PreviewModeBanner.tsx b/src/components/pageLayouts/PreviewModeBanner.tsx index 2ad820e4b..6706e8989 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, @@ -61,7 +61,7 @@ const PreviewModeBanner: React.FunctionComponent = (props): JSX.Element = const { t } = useTranslation(); const { secondaryColor, secondaryColorVariant1, onSecondaryColor, - } = useTheme(); + } = useTheme(); if (process.env.NEXT_PUBLIC_APP_STAGE === 'production') { return null; diff --git a/src/components/pageLayouts/QuickPreviewBanner.tsx b/src/components/pageLayouts/QuickPreviewBanner.tsx index 6b8305701..b1be9944b 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, @@ -45,7 +45,7 @@ const QuickPreviewBanner: React.FunctionComponent = (props): JSX.Element } = props; const { secondaryColor, secondaryColorVariant1, onSecondaryColor, - } = useTheme(); + } = useTheme(); const { t } = useTranslation(); const router: NextRouter = useRouter(); const customer: Customer = useCustomer(); 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/svg/AnimatedTextBubble.tsx b/src/components/svg/AnimatedTextBubble.tsx index 4ecae232b..829bf74d7 100644 --- a/src/components/svg/AnimatedTextBubble.tsx +++ b/src/components/svg/AnimatedTextBubble.tsx @@ -1,14 +1,19 @@ -import { css } from '@emotion/core'; -import { useTheme } from 'emotion-theming'; +import { + css, + useTheme, +} from '@emotion/react'; import React from 'react'; -import { Theme } from '../../types/data/Theme'; - const AnimatedTextBubble = props => { - const theme: Theme = useTheme(); + const theme = useTheme(); const { surfaceColor } = theme; return ( -
+
{ transform: translateY(-4px); } 30% { - transform: translateY(0px); + transform: translateY(0px); } 100% { transform: translateY(0px); diff --git a/src/components/utils/Btn.tsx b/src/components/utils/Btn.tsx index bb1e5b362..f39435336 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'; @@ -35,7 +35,7 @@ const Btn: React.FunctionComponent = (props): JSX.Element => { transparent, ...rest } = props; - const customerTheme = useTheme(); + const customerTheme = useTheme(); const { color, backgroundColor, 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..20e189b41 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'; @@ -32,7 +32,7 @@ const CircleBtn: React.FunctionComponent = (props): JSX.Element => { transparent, ...rest } = props; - const customerTheme = useTheme(); + const customerTheme = useTheme(); const { color, backgroundColor, 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..988c74363 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'; @@ -16,7 +16,7 @@ type Props = { * Meant to be used to display anything that is legal-related (privacy policies, terms of use, etc.) */ const LegalContent: React.FunctionComponent = (props): JSX.Element => { - const theme = useTheme(); + const theme = useTheme(); const { primaryColor } = theme; const { content} = props; diff --git a/src/components/utils/Stamp.tsx b/src/components/utils/Stamp.tsx index d8b32d62d..18961c4c7 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'; @@ -17,7 +17,7 @@ export const Stamp: React.FunctionComponent = (props): JSX.Element => { children, ...rest } = props; - const { secondaryColorVariant1, secondaryColor } = useTheme(); + const { secondaryColorVariant1, secondaryColor } = useTheme(); return (
( console.log('WithHOCTemplate props', this.props); return ( + // @ts-ignore ); } 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'; diff --git a/src/types/emotion-theme.ts b/src/types/emotion-theme.ts new file mode 100644 index 000000000..cffd81e7f --- /dev/null +++ b/src/types/emotion-theme.ts @@ -0,0 +1,11 @@ +import { CustomerTheme } from './data/CustomerTheme'; + +/** + * Emotion theme used thorough the whole application. + * + * @see https://emotion.sh/docs/emotion-11#theme-type + */ +declare module '@emotion/react' { + export interface Theme extends CustomerTheme { + } +} diff --git a/tsconfig.json b/tsconfig.json index fa24457cc..e9ec97baa 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,6 +6,7 @@ "forceConsistentCasingInFileNames": true, "isolatedModules": true, "jsx": "preserve", + "jsxImportSource": "@emotion/react", "lib": [ "dom", "dom.iterable", diff --git a/tsconfig.md b/tsconfig.md new file mode 100644 index 000000000..25f921737 --- /dev/null +++ b/tsconfig.md @@ -0,0 +1,93 @@ +Documentation of `tsconfig.json` +=== + +# Introduction + +TypeScript's configuration is complicated because it needs to be compatible with all 3rd parties that rely on it. + +Some of those 3rd parties are: +- [Emotion](https://emotion.sh/docs/typescript) +- [Jest (`ts-jest`)](https://kulshekhar.github.io/ts-jest/) +- [Next.js](https://nextjs.org/docs/basic-features/typescript) +- [Cypress](https://docs.cypress.io/guides/tooling/typescript-support.html#Install-TypeScript) + +# Compiler options + +> Being honest, I don't remember why the TS configuration became the way it is. +> +> Basically, it's the product of lots of work and tweaks found on the web. +> Initially, it was simply what Next.js recommended. +> But, it has grown every time yet another 3rd party support was added. +> +> Also, the lack of comment support in .json file didn't help to track changes. +> +> From now on, I'll try describing why each option is configured the way it is. + +```json5 +{ + "compilerOptions": { + "allowJs": false, + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "isolatedModules": true, + "jsx": "preserve", + + // Added by Emotion 11, necessary to use the "css" props using the "Babel preset", without using JSX pragma. + // Using the Babel preset is better (DX), because we don't have to use "/** @jsx jsx */" in every file, as Babel does it for us. + // See https://emotion.sh/docs/typescript#css-prop TS configuration to support the "css" prop + // See https://emotion.sh/docs/emotion-11#typescript Migration guide about Emotion 11 for TS + // See https://emotion.sh/docs/css-prop#babel-preset Babel preset vs JSX pragma configuration + // See https://github.com/emotion-js/emotion/issues/1606#issuecomment-757930872 Issue explanation when migrating from Emotion 10 to 11 + // See https://github.com/UnlyEd/next-right-now/pull/247 Emotion v10 > v11 migration pull request + "jsxImportSource": "@emotion/react", + + "lib": [ + "dom", + "dom.iterable", + "es2017" + ], + "module": "esnext", + "moduleResolution": "node", + "noEmit": true, + "noUnusedLocals": false, + "noUnusedParameters": false, + "preserveConstEnums": true, + "removeComments": false, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": false, + "target": "ES2019" + }, + + // Exclude all folders and files that shouldn't be interpreted as TS files. + // Makes TS compilation faster when non-TS folders are being ignored. + // Takes precedence over "include" rule. + "exclude": [ + ".github", + ".next", + "_site", + "coverage", + "cypress", + "node_modules", + "public" + ], + + // Only the files matching those patterns will be included. + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx" + ] +} + +``` + +# Cypress `tsconfig` + +Beware the `cypress/tsconfig.json` extends the `tsconfig.json` for convenience, as it helps avoid rules duplication. + +Therefore, changes made to the `tsconfig.json` might affect the `cypress/tsconfig.json`. + +For instance, the `exclude` rule had to be overridden in `cypress/tsconfig.json`, otherwise it'd exclude the whole `cypress` folder. diff --git a/yarn.lock b/yarn.lock index 54dae2a57..3bafeb105 100644 --- a/yarn.lock +++ b/yarn.lock @@ -219,15 +219,6 @@ "@babel/helper-explode-assignable-expression" "^7.10.4" "@babel/types" "^7.10.4" -"@babel/helper-builder-react-jsx-experimental@^7.12.1": - version "7.12.4" - resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.12.4.tgz#55fc1ead5242caa0ca2875dcb8eed6d311e50f48" - integrity sha512-AjEa0jrQqNk7eDQOo0pTfUOwQBMF+xVqrausQwT9/rTKy0g04ggFNaJpaE09IQMn9yExluigWMJcj0WC7bq+Og== - dependencies: - "@babel/helper-annotate-as-pure" "^7.10.4" - "@babel/helper-module-imports" "^7.12.1" - "@babel/types" "^7.12.1" - "@babel/helper-builder-react-jsx-experimental@^7.12.11": version "7.12.11" resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.12.11.tgz#a39616d7e4cf8f9da1f82b5fc3ee1f7406beeb11" @@ -348,7 +339,7 @@ dependencies: "@babel/types" "^7.12.1" -"@babel/helper-module-imports@^7.12.5": +"@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== @@ -622,7 +613,7 @@ dependencies: "@babel/helper-plugin-utils" "^7.8.0" -"@babel/plugin-syntax-jsx@^7.12.1", "@babel/plugin-syntax-jsx@^7.2.0": +"@babel/plugin-syntax-jsx@^7.12.1": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz#9d9d357cc818aa7ae7935917c1257f67677a0926" integrity sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg== @@ -893,16 +884,6 @@ "@babel/helper-plugin-utils" "^7.10.4" "@babel/plugin-syntax-jsx" "^7.12.1" -"@babel/plugin-transform-react-jsx@^7.3.0": - version "7.12.1" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.12.1.tgz#c2d96c77c2b0e4362cc4e77a43ce7c2539d478cb" - integrity sha512-RmKejwnT0T0QzQUzcbP5p1VWlpnP8QHtdhEtLG55ZDQnJNalbF3eeDyu3dnGKvGzFIQiBzFhBYTwvv435p9Xpw== - dependencies: - "@babel/helper-builder-react-jsx" "^7.10.4" - "@babel/helper-builder-react-jsx-experimental" "^7.12.1" - "@babel/helper-plugin-utils" "^7.10.4" - "@babel/plugin-syntax-jsx" "^7.12.1" - "@babel/plugin-transform-regenerator@^7.4.5": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.12.1.tgz#5f0a28d842f6462281f06a964e88ba8d7ab49753" @@ -1342,65 +1323,44 @@ enabled "2.0.x" kuler "^2.0.0" -"@emotion/babel-plugin-jsx-pragmatic@^0.1.5": - version "0.1.5" - resolved "https://registry.yarnpkg.com/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.1.5.tgz#27debfe9c27c4d83574d509787ae553bf8a34d7e" - integrity sha512-y+3AJ0SItMDaAgGPVkQBC/S/BaqaPACkQ6MyCI2CUlrjTxKttTVfD3TMtcs7vLEcLxqzZ1xiG0vzwCXjhopawQ== +"@emotion/babel-plugin@^11.0.0": + version "11.1.2" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.1.2.tgz#68fe1aa3130099161036858c64ee92056c6730b7" + integrity sha512-Nz1k7b11dWw8Nw4Z1R99A9mlB6C6rRsCtZnwNUOj4NsoZdrO2f2A/83ST7htJORD5zpOiLKY59aJN23092949w== dependencies: - "@babel/plugin-syntax-jsx" "^7.2.0" - -"@emotion/babel-preset-css-prop@10.0.27": - version "10.0.27" - resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-10.0.27.tgz#58868d9a6afee0eeaeb0fa9dc5ccb1b12d4f786b" - integrity sha512-rducrjTpLGDholp0l2l4pXqpzAqYYGMg/x4IteO0db2smf6zegn6RRZdDnbaoMSs63tfPWgo2WukT1/F1gX/AA== - dependencies: - "@babel/plugin-transform-react-jsx" "^7.3.0" - "@babel/runtime" "^7.5.5" - "@emotion/babel-plugin-jsx-pragmatic" "^0.1.5" - babel-plugin-emotion "^10.0.27" + "@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.5" + "@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/cache@^10.0.27": - version "10.0.27" - resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.27.tgz#7895db204e2c1a991ae33d51262a3a44f6737303" - integrity sha512-Zp8BEpbMunFsTcqAK4D7YTm3MvCp1SekflSLJH8lze2fCcSZ/yMkXHo8kb3t1/1Tdd3hAqf3Fb7z9VZ+FMiC9w== +"@emotion/cache@^11.1.3": + version "11.1.3" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.1.3.tgz#c7683a9484bcd38d5562f2b9947873cf66829afd" + integrity sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA== dependencies: - "@emotion/sheet" "0.9.4" - "@emotion/stylis" "0.8.5" - "@emotion/utils" "0.11.3" - "@emotion/weak-memoize" "0.2.5" + "@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.35": - version "10.0.35" - resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3" - integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw== - dependencies: - "@babel/runtime" "^7.5.5" - "@emotion/cache" "^10.0.27" - "@emotion/css" "^10.0.27" - "@emotion/serialize" "^0.11.15" - "@emotion/sheet" "0.9.4" - "@emotion/utils" "0.11.3" - -"@emotion/css@^10.0.27": - version "10.0.27" - resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c" - integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw== - dependencies: - "@emotion/serialize" "^0.11.15" - "@emotion/utils" "0.11.3" - babel-plugin-emotion "^10.0.27" - -"@emotion/hash@0.7.4": - version "0.7.4" - resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831" - integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A== +"@emotion/eslint-plugin@11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@emotion/eslint-plugin/-/eslint-plugin-11.0.0.tgz#7666b750df62dc33a93bb1e09086f1caaecadc6f" + integrity sha512-V5w/LgV61xta+U6LKht3WQqfjTLueU2mh1aRTcK5OfkRhZ4OZFE0Inq/oVwLCq5g3Hzoaq27PRm+Tk9W18QScw== -"@emotion/is-prop-valid@0.8.6": - version "0.8.6" - resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz#4757646f0a58e9dec614c47c838e7147d88c263c" - integrity sha512-mnZMho3Sq8BfzkYYRVc8ilQTnc8U02Ytp6J1AwM6taQStZ3AhsEJBX2LzhA/LJirNCwM2VtHL3VFIZ+sNJUgUQ== - dependencies: - "@emotion/memoize" "0.7.4" +"@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== "@emotion/is-prop-valid@^0.8.8": version "0.8.8" @@ -1409,61 +1369,79 @@ dependencies: "@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": version "0.7.4" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== -"@emotion/serialize@^0.11.15": - version "0.11.15" - resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.15.tgz#9a0f5873fb458d87d4f23e034413c12ed60a705a" - integrity sha512-YE+qnrmGwyR+XB5j7Bi+0GT1JWsdcjM/d4POu+TXkcnrRs4RFCCsi3d/Ebf+wSStHqAlTT2+dfd+b9N9EO2KBg== - dependencies: - "@emotion/hash" "0.7.4" - "@emotion/memoize" "0.7.4" - "@emotion/unitless" "0.7.5" - "@emotion/utils" "0.11.3" - csstype "^2.5.7" - -"@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/memoize@^0.7.4", "@emotion/memoize@^0.7.5": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" + integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== -"@emotion/styled-base@^10.0.27": - version "10.0.27" - resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.27.tgz#d9efa307ae4e938fcc4d0596b40b7e8bc10f7c7c" - integrity sha512-ufHM/HhE3nr309hJG9jxuFt71r6aHn7p+bwXduFxcwPFEfBIqvmZUMtZ9YxIsY61PVwK3bp4G1XhaCzy9smVvw== +"@emotion/react@11.1.4": + version "11.1.4" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.1.4.tgz#ddee4247627ff7dd7d0c6ae52f1cfd6b420357d2" + integrity sha512-9gkhrW8UjV4IGRnEe4/aGPkUxoGS23aD9Vu6JCGfEDyBYL+nGkkRBoMFGAzCT9qFdyUvQp4UUtErbKWxq/JS4A== dependencies: - "@babel/runtime" "^7.5.5" - "@emotion/is-prop-valid" "0.8.6" - "@emotion/serialize" "^0.11.15" - "@emotion/utils" "0.11.3" + "@babel/runtime" "^7.7.2" + "@emotion/cache" "^11.1.3" + "@emotion/serialize" "^1.0.0" + "@emotion/sheet" "^1.0.1" + "@emotion/utils" "^1.0.0" + "@emotion/weak-memoize" "^0.2.5" + hoist-non-react-statics "^3.3.1" + +"@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@^1.0.0", "@emotion/sheet@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.1.tgz#245f54abb02dfd82326e28689f34c27aa9b2a698" + integrity sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g== -"@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== +"@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: - "@emotion/styled-base" "^10.0.27" - babel-plugin-emotion "^10.0.27" + "@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/stylis@0.8.5", "@emotion/stylis@^0.8.4": +"@emotion/stylis@^0.8.4": version "0.8.5" 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.4": +"@emotion/unitless@^0.7.4", "@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== -"@emotion/utils@0.11.3": - version "0.11.3" - resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924" - integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw== +"@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== @@ -3501,22 +3479,6 @@ babel-plugin-dynamic-import-node@^2.3.3: dependencies: object.assign "^4.1.0" -babel-plugin-emotion@^10.0.27: - version "10.0.27" - resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.27.tgz#59001cf5de847c1d61f2079cd906a90a00d3184f" - integrity sha512-SUNYcT4FqhOqvwv0z1oeYhqgheU8qrceLojuHyX17ngo7WtWqN5I9l3IGHzf21Xraj465CVzF4IvOlAF+3ed0A== - dependencies: - "@babel/helper-module-imports" "^7.0.0" - "@emotion/hash" "0.7.4" - "@emotion/memoize" "0.7.4" - "@emotion/serialize" "^0.11.15" - babel-plugin-macros "^2.0.0" - babel-plugin-syntax-jsx "^6.18.0" - convert-source-map "^1.5.0" - escape-string-regexp "^1.0.5" - find-root "^1.1.0" - source-map "^0.5.7" - babel-plugin-istanbul@6.0.0, babel-plugin-istanbul@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765" @@ -3538,7 +3500,7 @@ babel-plugin-jest-hoist@^26.6.2: "@types/babel__core" "^7.0.0" "@types/babel__traverse" "^7.0.6" -babel-plugin-macros@^2.0.0: +babel-plugin-macros@^2.6.1: version "2.8.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138" integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg== @@ -5081,7 +5043,7 @@ csstype@3.0.6: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.6.tgz#865d0b5833d7d8d40f4e5b8a6d76aea3de4725ef" integrity sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw== -csstype@^2.2.0, csstype@^2.5.7: +csstype@^2.2.0: version "2.6.9" resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098" integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q== @@ -5795,15 +5757,6 @@ emojis-list@^3.0.0: resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q== -emotion-theming@10.0.27: - version "10.0.27" - resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10" - integrity sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw== - dependencies: - "@babel/runtime" "^7.5.5" - "@emotion/weak-memoize" "0.2.5" - hoist-non-react-statics "^3.3.0" - enabled@2.0.x: version "2.0.0" resolved "https://registry.yarnpkg.com/enabled/-/enabled-2.0.0.tgz#f9dd92ec2d6f4bbc0d5d1e64e21d61cd4665e7c2" @@ -5970,6 +5923,11 @@ escape-string-regexp@^2.0.0: resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344" integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w== +escape-string-regexp@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" + integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA== + escodegen@^1.14.1: version "1.14.1" resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.1.tgz#ba01d0c8278b5e95a9a45350142026659027a457" @@ -7256,7 +7214,7 @@ hoist-non-react-statics@^2.3.1: resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1: 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== @@ -12590,6 +12548,11 @@ stylis@3.5.4: resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== +stylis@^4.0.3: + version "4.0.6" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.6.tgz#0d8b97b6bc4748bea46f68602b6df27641b3c548" + integrity sha512-1igcUEmYFBEO14uQHAJhCUelTR5jPztfdVKrYxRnDa5D5Dn3w0NxXupJNPr/VV/yRfZYEAco8sTIRZzH3sRYKg== + stylus-lookup@^3.0.1: version "3.0.2" resolved "https://registry.yarnpkg.com/stylus-lookup/-/stylus-lookup-3.0.2.tgz#c9eca3ff799691020f30b382260a67355fefdddd"