Merge pull request #1274 from newrelic/upgrade-gatsby

Upgrade Gatsby to v3

gatsby/wrap-page-element.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PageContext } from '../src/components/PageContext';
-import { Global, css } from '@emotion/core';
+import { Global, css } from '@emotion/react';
 
 const wrapPageElement = ({ element, props }) => {
   return (

package.json

@@ -3,34 +3,34 @@
   "private": true,
   "version": "1.43.0",
   "dependencies": {
-    "@emotion/core": "^10.1.1",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/react": "^11.1.5",
+    "@emotion/styled": "^11.3.0",
     "@mdx-js/mdx": "^1.6.19",
     "@mdx-js/react": "^1.6.19",
-    "@newrelic/gatsby-theme-newrelic": "^1.38.0",
+    "@newrelic/gatsby-theme-newrelic": "^2.0.0",
     "@splitsoftware/splitio-react": "^1.2.0",
     "@xstate/react": "^1.0.2",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "diff": "^4.0.2",
-    "gatsby": "^2.32.9",
+    "gatsby": "^3.3.1",
     "gatsby-image": "^2.4.20",
-    "gatsby-plugin-emotion": "^4.3.14",
-    "gatsby-plugin-manifest": "^2.4.35",
+    "gatsby-plugin-emotion": "^6.3.0",
+    "gatsby-plugin-manifest": "^3.3.0",
     "gatsby-plugin-mdx": "^1.4.0",
     "gatsby-plugin-meta-redirect": "^1.1.1",
-    "gatsby-plugin-offline": "^3.2.32",
-    "gatsby-plugin-react-helmet": "^3.3.12",
+    "gatsby-plugin-offline": "^4.3.0",
+    "gatsby-plugin-react-helmet": "^4.3.0",
     "gatsby-plugin-robots-txt": "^1.5.3",
-    "gatsby-plugin-sass": "^2.3.22",
-    "gatsby-plugin-sharp": "^2.6.43",
-    "gatsby-plugin-sitemap": "^2.4.17",
-    "gatsby-plugin-use-dark-mode": "^1.2.0",
+    "gatsby-plugin-sass": "^4.3.0",
+    "gatsby-plugin-sharp": "^3.3.1",
+    "gatsby-plugin-sitemap": "^4.0.0-next.0",
+    "gatsby-plugin-use-dark-mode": "^1.3.0",
     "gatsby-remark-autolink-headers": "^2.9.0",
-    "gatsby-remark-images": "^3.5.1",
-    "gatsby-source-filesystem": "^2.3.35",
-    "gatsby-transformer-remark": "^2.8.47",
-    "gatsby-transformer-sharp": "^2.5.20",
+    "gatsby-remark-images": "^5.0.0",
+    "gatsby-source-filesystem": "^3.3.0",
+    "gatsby-transformer-remark": "^4.0.0",
+    "gatsby-transformer-sharp": "^3.3.0",
     "js-cookie": "^2.2.1",
     "node-fetch": "^2.6.1",
     "node-sass": "^4.14.1",

setup-test-env.js

@@ -1,5 +1,5 @@
 /* global expect */
 import { createSerializer } from 'jest-emotion';
-import * as emotion from '@emotion/core';
+import * as emotion from '@emotion/react';
 
 expect.addSnapshotSerializer(createSerializer(emotion));

src/components/Agenda/Agenda.js

@@ -1,6 +1,6 @@
 import React, { cloneElement, Children, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import Heading from './Heading';
 import Session from './Session';
 import Time from './Time';

src/components/Agenda/Heading.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 Cell from './Cell';
 
 const Heading = ({ children, className }) => (

src/components/Agenda/Session.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 Cell from './Cell';
 
 const Session = ({

src/components/Caution.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import styles from './Callouts.module.scss';
+import * as styles from './Callouts.module.scss';
 
 const Caution = ({ title, children }) => {
   return (

src/components/CodeDef/Block.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const Block = ({ children }) => (
   <div

src/components/CodeDef/Bracket.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const Bracket = ({ children }) => (
   <span

src/components/CodeDef/CodeDef.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import Block from './Block';
 import Bracket from './Bracket';
 import Comment from './Comment';

src/components/CodeDef/Comment.js

@@ -1,6 +1,6 @@
 import React, { Children } from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import Markdown from 'react-markdown';
 
 const Content = ({ children, ...props }) => {

src/components/CodeDef/Identifier.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const Identifier = ({ children }) => (
   <span

src/components/CodeDef/Keyword.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const Keyword = ({ children }) => (
   <span

src/components/CodeDef/Number.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const NumberValue = ({ value }) => (
   <span

src/components/CodeDef/Operator.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const Operator = ({ children }) => (
   <span

src/components/CodeDef/String.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const StringValue = ({ value }) => (
   <span

src/components/CodeDef/Type.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const Type = ({ className, children }) => (
   <span

src/components/CodeEditor.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import Editor from 'react-simple-code-editor';
 import CodeHighlight from './CodeHighlight';
-import styles from './CodeEditor.module.scss';
+import * as styles from './CodeEditor.module.scss';
 
 const CodeEditor = ({ value, language, lineNumbers, onChange }) => {
   const lineNumberWidth = value.trim().split('\n').length.toString().length;

src/components/CodeHighlight.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import Highlight from 'prism-react-renderer';
 import Prism from 'prismjs';
-import styles from './CodeHighlight.module.scss';
+import * as styles from './CodeHighlight.module.scss';
 import { partition, range } from '../utils/array';
 
 const CodeHighlight = ({

src/components/Countdown/Countdown.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import CountdownUnit from './CountdownUnit';
 import PropTypes from 'prop-types';
-import styles from './CountdownContainer.module.scss';
+import * as styles from './CountdownContainer.module.scss';
 
 const Countdown = ({ countdown }) => {
   return (

src/components/Countdown/CountdownContainer.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import Countdown from './Countdown';
 import PropTypes from 'prop-types';
-import styles from './CountdownContainer.module.scss';
+import * as styles from './CountdownContainer.module.scss';
 
 const getRemainingTime = (targetDate) => {
   const countDownDate = new Date(targetDate).getTime();

src/components/Countdown/CountdownUnit.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './CountdownContainer.module.scss';
+import * as styles from './CountdownContainer.module.scss';
 import PropTypes from 'prop-types';
 
 const CountdownUnit = ({ value, label }) => {

src/components/FeatherIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import styles from './FeatherIcon.module.scss';
+import * as styles from './FeatherIcon.module.scss';
 
 const FeatherIcon = ({ className, name, size = '1em', ...props }) => {
   const paths = ICONS[name];

src/components/FeaturedGuideTile.js

@@ -1,6 +1,6 @@
 import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { Button, Icon, Surface, Link } from '@newrelic/gatsby-theme-newrelic';
 
 const FeaturedGuideTile = ({

src/components/GuideListing/Description.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const Description = ({ children, className }) => {
   return (

src/components/GuideListing/GuideListing.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import Description from './Description';
 import List from './List';
 import PropTypes from 'prop-types';

src/components/GuideListing/List.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import PropTypes from 'prop-types';
 
 const List = ({ children, className }) => {

src/components/GuideTile/GuideTile.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 { Link, Icon, Surface } from '@newrelic/gatsby-theme-newrelic';
 
 const GuideTile = ({ duration, title, description, className, to }) => (

src/components/HopinLogo.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const HopinLogo = () => {
   return (

src/components/IconGallery.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import styles from './IconGallery.module.scss';
+import * as styles from './IconGallery.module.scss';
 import IconReference from './IconReference';
 import SearchInput from './SearchInput';
 

src/components/IconReference.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import useClipboard from '../hooks/useClipboard';
-import styles from './IconReference.module.scss';
+import * as styles from './IconReference.module.scss';
 import PropTypes from 'prop-types';
 
 const IconReference = ({ type }) => {

src/components/Iframe.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const Iframe = (props) => {
   // strip out width and then render iframe

src/components/Intro.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import SideBySide from './SideBySide';
 import PropTypes from 'prop-types';
 

src/components/MDXContainer.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 { MarkdownContainer, MDX } from '@newrelic/gatsby-theme-newrelic';
 
 import Intro from './Intro';

src/components/Markdown.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 ReactMarkdown from 'react-markdown';
 
 const Markdown = ({ className, ...props }) => (

src/components/MarketoForm/MarketoForm.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 { navigate } from 'gatsby';
 import useMarketoForm from '../../hooks/useMarketoForm';
 import Spinner from '../Spinner';

src/components/MethodReference.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 ReferenceExample from './ReferenceExample';
 import FunctionDefinition from './FunctionDefinition';
 import Markdown from './Markdown';

src/components/NewRelicSVG.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import SVG from '@newrelic/gatsby-theme-newrelic/src/components/SVG';
 
 const NewRelicSVG = (props) => (

src/components/PageLayout/Header.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const Header = ({ title, children }) => (
   <header

src/components/PageLayout/PageLayout.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 Header from './Header';
 import MarkdownContent from './MarkdownContent';
 import Context from './Context';

src/components/PropList.js

@@ -1,12 +1,12 @@
 import React, { Fragment } from 'react';
 import cx from 'classnames';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import PropTypes from 'prop-types';
 import CodeDef from './CodeDef';
 import FunctionDefinition from './FunctionDefinition';
 import Markdown from './Markdown';
 import ReferenceExample from './ReferenceExample';
-import styles from './PropList.module.scss';
+import * as styles from './PropList.module.scss';
 import { Callout } from '@newrelic/gatsby-theme-newrelic';
 import { graphql } from 'gatsby';
 

src/components/ReferenceExample.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import styles from './ReferenceExample.module.scss';
+import * as styles from './ReferenceExample.module.scss';
 import ReferencePreview from './ReferencePreview';
 import { graphql } from 'gatsby';
 import { CodeBlock } from '@newrelic/gatsby-theme-newrelic';