Remove usage of JSX pragma (/** @jsx jsx */) + add babel support for …

…the Emotion "css" props (@emotion/babel-preset-css-prop) - See vercel/next.js#18461 (comment)
UnlyEd · Oct 30, 2020 · f874e94 · f874e94 · github-actions · Oct 30, 2020
1 parent e39c13a
commit f874e94
Show file tree

Hide file tree

Showing 73 changed files with 107 additions and 229 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['next/babel', '@emotion/babel-preset-css-prop'],
+};
diff --git a/package.json b/package.json
@@ -134,10 +134,10 @@
     "next-with-apollo": "5.0.1",
     "prop-types": "15.7.2",
     "rc-tooltip": "5.0.0",
-    "react": "16.13.1",
+    "react": "17.0.1",
     "react-apollo": "3.1.5",
     "react-code-blocks": "0.0.8",
-    "react-dom": "16.13.1",
+    "react-dom": "17.0.1",
     "react-i18next": "11.7.2",
     "react-style-proptype": "3.2.2",
     "reactstrap": "8.5.1",
@@ -147,6 +147,7 @@
     "winston": "3.2.1"
   },
   "devDependencies": {
+    "@emotion/babel-preset-css-prop": "10.0.27",
     "@next/bundle-analyzer": "9.5.3",
     "@svgr/cli": "5.4.0",
     "@types/amplitude-js": "5.11.0",

diff --git a/src/components/ComponentTemplate.tsx b/src/components/ComponentTemplate.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import React from 'react';
 
 import Text from './utils/Text';

diff --git a/src/components/animations/Loader.tsx b/src/components/animations/Loader.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import React from 'react';
 
 import AnimatedLoader from '../svg/AnimatedLoader';

diff --git a/src/components/appBootstrap/BrowserPageBootstrap.tsx b/src/components/appBootstrap/BrowserPageBootstrap.tsx
@@ -1,9 +1,7 @@
-/** @jsx jsx */
 import {
   Amplitude,
   AmplitudeProvider,
 } from '@amplitude/react-amplitude';
-import { jsx } from '@emotion/core';
 import * as Sentry from '@sentry/node';
 import { createLogger } from '@unly/utils-simple-logger';
 import { AmplitudeClient } from 'amplitude-js';

diff --git a/src/components/appBootstrap/MultiversalGlobalStyles.tsx b/src/components/appBootstrap/MultiversalGlobalStyles.tsx
@@ -1,8 +1,6 @@
-/** @jsx jsx */
 import {
   css,
   Global,
-  jsx,
 } from '@emotion/core';
 
 import {

diff --git a/src/components/appBootstrap/ServerPageBootstrap.tsx b/src/components/appBootstrap/ServerPageBootstrap.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import * as Sentry from '@sentry/node';
 import { createLogger } from '@unly/utils-simple-logger';
 import React from 'react';

diff --git a/src/components/assets/Logo.tsx b/src/components/assets/Logo.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import styled from '@emotion/styled';
 import classnames from 'classnames';
 import deepmerge from 'deepmerge';

diff --git a/src/components/data/AllProducts.tsx b/src/components/data/AllProducts.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import filter from 'lodash.filter';
 import React from 'react';
 

diff --git a/src/components/data/ProductRow.tsx b/src/components/data/ProductRow.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import React from 'react';
 import {
   Col,

diff --git a/src/components/data/Products.tsx b/src/components/data/Products.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import map from 'lodash.map';
 import React from 'react';
 import { Container } from 'reactstrap';

diff --git a/src/components/doc/BuiltInFeaturesSection.tsx b/src/components/doc/BuiltInFeaturesSection.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import React from 'react';
 import {
   Alert,

diff --git a/src/components/doc/BuiltInFeaturesSidebar.tsx b/src/components/doc/BuiltInFeaturesSidebar.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import map from 'lodash.map';
 import {
   NextRouter,

diff --git a/src/components/doc/BuiltInUtilitiesSection.tsx b/src/components/doc/BuiltInUtilitiesSection.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import React from 'react';
 import {
   Button,

diff --git a/src/components/doc/BuiltInUtilitiesSidebar.tsx b/src/components/doc/BuiltInUtilitiesSidebar.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import map from 'lodash.map';
 import {
   NextRouter,

diff --git a/src/components/doc/DocPage.tsx b/src/components/doc/DocPage.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import React, { ReactNode } from 'react';
 
 type Props = {

diff --git a/src/components/doc/DocSection.tsx b/src/components/doc/DocSection.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import React, { ReactNode } from 'react';
 
 type Props = {

diff --git a/src/components/doc/ExternalFeaturesSection.tsx b/src/components/doc/ExternalFeaturesSection.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import React from 'react';
 import {
   Alert,

diff --git a/src/components/doc/IntroductionSection.tsx b/src/components/doc/IntroductionSection.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import React from 'react';
 import {
   Alert,

diff --git a/src/components/doc/NativeFeaturesSection.tsx b/src/components/doc/NativeFeaturesSection.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import React from 'react';
 import {
   Alert,

diff --git a/src/components/doc/NativeFeaturesSidebar.tsx b/src/components/doc/NativeFeaturesSidebar.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import map from 'lodash.map';
 import {
   NextRouter,

diff --git a/src/components/doc/SidebarFooter.tsx b/src/components/doc/SidebarFooter.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 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
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 

diff --git a/src/components/errors/DefaultErrorLayout.tsx b/src/components/errors/DefaultErrorLayout.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 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
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import * as React from 'react';
 
 type Props = {

diff --git a/src/components/i18n/I18nBtnChangeLocale.tsx b/src/components/i18n/I18nBtnChangeLocale.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import { useTheme } from 'emotion-theming';
 import startsWith from 'lodash.startswith';
 import {

diff --git a/src/components/pageLayouts/DefaultLayout.tsx b/src/components/pageLayouts/DefaultLayout.tsx
@@ -1,9 +1,7 @@
-/** @jsx jsx */
 import {
   Amplitude,
   LogOnMount,
 } from '@amplitude/react-amplitude';
-import { jsx } from '@emotion/core';
 import { createLogger } from '@unly/utils-simple-logger';
 import classnames from 'classnames';
 import {

diff --git a/src/components/pageLayouts/DefaultPageContainer.tsx b/src/components/pageLayouts/DefaultPageContainer.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import classnames from 'classnames';
 import { useTheme } from 'emotion-theming';
 import React from 'react';

diff --git a/src/components/pageLayouts/Footer.tsx b/src/components/pageLayouts/Footer.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import { useTheme } from 'emotion-theming';
 import React from 'react';
 import { useTranslation } from 'react-i18next';

diff --git a/src/components/pageLayouts/Nav.tsx b/src/components/pageLayouts/Nav.tsx
@@ -1,9 +1,5 @@
-/** @jsx jsx */
 import { Amplitude } from '@amplitude/react-amplitude';
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classnames from 'classnames';
 import kebabCase from 'lodash.kebabcase';

diff --git a/src/components/pageLayouts/PreviewModeBanner.tsx b/src/components/pageLayouts/PreviewModeBanner.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   NextRouter,

diff --git a/src/components/utils/Cards.tsx b/src/components/utils/Cards.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import classnames from 'classnames';
 import React, { ReactNode } from 'react';
 import { CardDeck } from 'reactstrap';

diff --git a/src/components/utils/Code.tsx b/src/components/utils/Code.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import React from 'react';
 import {
   CodeBlock,

diff --git a/src/components/utils/ExternalLink.tsx b/src/components/utils/ExternalLink.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import React from 'react';
 
 type Props = {

diff --git a/src/components/utils/Markdown.tsx b/src/components/utils/Markdown.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import * as Sentry from '@sentry/node';
 import { createLogger } from '@unly/utils-simple-logger';
 import deepmerge from 'deepmerge';

diff --git a/src/components/utils/SimpleTooltip.tsx b/src/components/utils/SimpleTooltip.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import React from 'react';
 import Tooltip from './Tooltip';
 

diff --git a/src/components/utils/Tooltip.tsx b/src/components/utils/Tooltip.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import RCTooltip from 'rc-tooltip';
 import React from 'react';
 

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import { createLogger } from '@unly/utils-simple-logger';
 import {
   GetStaticProps,

diff --git a/src/pages/[locale]/examples/built-in-features/analytics.tsx b/src/pages/[locale]/examples/built-in-features/analytics.tsx
@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import { Amplitude } from '@amplitude/react-amplitude';
-import { jsx } from '@emotion/core';
 import { createLogger } from '@unly/utils-simple-logger';
 import {
   GetStaticPaths,

diff --git a/src/pages/[locale]/examples/built-in-features/animations.tsx b/src/pages/[locale]/examples/built-in-features/animations.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { createLogger } from '@unly/utils-simple-logger';
 import {
   GetStaticPaths,

diff --git a/src/pages/[locale]/examples/built-in-features/cookies-consent.tsx b/src/pages/[locale]/examples/built-in-features/cookies-consent.tsx
@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import { Amplitude } from '@amplitude/react-amplitude';
-import { jsx } from '@emotion/core';
 import { createLogger } from '@unly/utils-simple-logger';
 import {
   GetStaticPaths,

diff --git a/src/pages/[locale]/examples/built-in-features/css-in-js.tsx b/src/pages/[locale]/examples/built-in-features/css-in-js.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { createLogger } from '@unly/utils-simple-logger';
 import {
   GetStaticPaths,
@@ -89,8 +87,7 @@ const ExampleCssInJsPage: NextPage<Props> = (props): JSX.Element => {
 
         <Code
           text={`
-            /** @jsx jsx */
-            import { css, jsx } from '@emotion/core';
+            import { css } from '@emotion/core';
 
             <div
               css={css\`
@@ -126,8 +123,6 @@ const ExampleCssInJsPage: NextPage<Props> = (props): JSX.Element => {
 
         <Code
           text={`
-            /** @jsx jsx */
-            import { jsx } from '@emotion/core';
             import styled from '@emotion/styled';
 
             const StyledImage = styled.img\`

diff --git a/src/pages/[locale]/examples/built-in-features/docs-site.tsx b/src/pages/[locale]/examples/built-in-features/docs-site.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { createLogger } from '@unly/utils-simple-logger';
 import {
   GetStaticPaths,

diff --git a/src/pages/[locale]/examples/built-in-features/graphql.tsx b/src/pages/[locale]/examples/built-in-features/graphql.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { createLogger } from '@unly/utils-simple-logger';
 import {
   GetStaticPaths,

diff --git a/src/pages/[locale]/examples/built-in-features/hosting.tsx b/src/pages/[locale]/examples/built-in-features/hosting.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { createLogger } from '@unly/utils-simple-logger';
 import {
   GetStaticPaths,

diff --git a/src/pages/[locale]/examples/built-in-features/icons.tsx b/src/pages/[locale]/examples/built-in-features/icons.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { createLogger } from '@unly/utils-simple-logger';
 import {

diff --git a/src/pages/[locale]/examples/built-in-features/manual-deployments.tsx b/src/pages/[locale]/examples/built-in-features/manual-deployments.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { createLogger } from '@unly/utils-simple-logger';
 import {
   GetStaticPaths,