Merge pull request #10563 from ethereum/remove-gatsby-emotion

Remove gatsby emotion plugin
ethereum · Jun 29, 2023 · 12caca2 · 12caca2
2 parents 6bb3474 + 3475f88
commit 12caca2
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 95 deletions.
diff --git a/gatsby-config.ts b/gatsby-config.ts
@@ -177,12 +177,6 @@ const config: GatsbyConfig = {
       },
     },
     // CSS in JS
-    {
-      resolve: `gatsby-plugin-emotion`,
-      options: {
-        labelFormat: "[filename]--[local]",
-      },
-    },
     {
       resolve: "@chakra-ui/gatsby-plugin",
       options: {

diff --git a/package.json b/package.json
@@ -30,7 +30,6 @@
     "focus-trap-react": "^10.0.0",
     "framer-motion": "^6.5.1",
     "gatsby": "^5.4.1",
-    "gatsby-plugin-emotion": "^8.4.0",
     "gatsby-plugin-gatsby-cloud": "^5.4.0",
     "gatsby-plugin-image": "^3.4.0",
     "gatsby-plugin-layout": "^3.24.0",

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -1,12 +1,7 @@
 import React, { useState, useEffect } from "react"
 import { ApolloProvider } from "@apollo/client"
-import { useColorModeValue, Text } from "@chakra-ui/react"
-import { ThemeProvider } from "@emotion/react"
-
 import { Flex } from "@chakra-ui/react"
 
-import { lightTheme, darkTheme } from "../theme"
-
 import Footer from "./Footer"
 import ZenMode from "./ZenMode"
 import Nav from "./Nav"
@@ -18,6 +13,7 @@ import FeedbackWidget from "./FeedbackWidget"
 import { SkipLink } from "./SkipLink"
 
 import { ZenModeContext } from "../contexts/ZenModeContext"
+import { lightTheme as oldTheme } from "../theme"
 
 import { useKeyPress } from "../hooks/useKeyPress"
 
@@ -55,9 +51,6 @@ const Layout: React.FC<IProps> = ({
   pageContext,
   children,
 }) => {
-  // TODO: tmp - for backward compatibility with old theme
-  const theme = useColorModeValue(lightTheme, darkTheme)
-
   const [isZenMode, setIsZenMode] = useState<boolean>(false)
   const [shouldShowSideNav, setShouldShowSideNav] = useState<boolean>(false)
 
@@ -108,63 +101,61 @@ const Layout: React.FC<IProps> = ({
 
   return (
     <ApolloProvider client={client}>
-      <ThemeProvider theme={theme}>
-        <ZenModeContext.Provider value={{ isZenMode, handleZenModeChange }}>
-          <SkipLink hrefId="#main-content" />
-          <TranslationBanner
-            shouldShow={shouldShowTranslationBanner}
-            isPageContentEnglish={isPageContentEnglish}
-            isPageRightToLeft={isPageRightToLeft}
-            originalPagePath={pageContext.i18n.originalPath || ""}
-          />
-          <TranslationBannerLegal
-            shouldShow={isLegal}
-            isPageRightToLeft={isPageRightToLeft}
-            originalPagePath={pageContext.i18n.originalPath || ""}
-          />
-
+      <ZenModeContext.Provider value={{ isZenMode, handleZenModeChange }}>
+        <SkipLink hrefId="#main-content" />
+        <TranslationBanner
+          shouldShow={shouldShowTranslationBanner}
+          isPageContentEnglish={isPageContentEnglish}
+          isPageRightToLeft={isPageRightToLeft}
+          originalPagePath={pageContext.i18n.originalPath || ""}
+        />
+        <TranslationBannerLegal
+          shouldShow={isLegal}
+          isPageRightToLeft={isPageRightToLeft}
+          originalPagePath={pageContext.i18n.originalPath || ""}
+        />
+
+        <Flex
+          position="relative"
+          margin="0px auto"
+          minHeight="100vh"
+          flexFlow="column"
+          maxW={{
+            lg: oldTheme.variables.maxPageWidth,
+          }}
+        >
+          <ZenMode>
+            <Nav path={path} />
+            {shouldShowSideNav && <SideNavMobile path={path} />}
+          </ZenMode>
           <Flex
-            position="relative"
-            margin="0px auto"
-            minHeight="100vh"
-            flexFlow="column"
-            maxW={{
-              lg: lightTheme.variables.maxPageWidth,
-            }}
+            flexDirection={{ base: "column", lg: "row" }}
+            id="main-content"
+            scrollMarginTop={20}
           >
-            <ZenMode>
-              <Nav path={path} />
-              {shouldShowSideNav && <SideNavMobile path={path} />}
-            </ZenMode>
-            <Flex
-              flexDirection={{ base: "column", lg: "row" }}
-              id="main-content"
-              scrollMarginTop={20}
-            >
-              {shouldShowSideNav && (
-                <ZenMode>
-                  <SideNav path={path} />
-                </ZenMode>
-              )}
-              <Flex flexDirection="column" width="100%">
-                <Flex
-                  justifyContent="space-around"
-                  alignItems="flex-start"
-                  overflow="visible"
-                  width="100%"
-                  flexGrow="1"
-                >
-                  {children}
-                </Flex>
+            {shouldShowSideNav && (
+              <ZenMode>
+                <SideNav path={path} />
+              </ZenMode>
+            )}
+            <Flex flexDirection="column" width="100%">
+              <Flex
+                justifyContent="space-around"
+                alignItems="flex-start"
+                overflow="visible"
+                width="100%"
+                flexGrow="1"
+              >
+                {children}
               </Flex>
             </Flex>
-            <ZenMode>
-              <Footer />
-            </ZenMode>
-            <FeedbackWidget location={path} />
           </Flex>
-        </ZenModeContext.Provider>
-      </ThemeProvider>
+          <ZenMode>
+            <Footer />
+          </ZenMode>
+          <FeedbackWidget location={path} />
+        </Flex>
+      </ZenModeContext.Provider>
     </ApolloProvider>
   )
 }

diff --git a/src/components/icons/staking/EthpoolGlyphIcon.tsx b/src/components/icons/staking/EthpoolGlyphIcon.tsx
@@ -1,3 +1,4 @@
+import React from "react"
 import { createIcon } from "@chakra-ui/react"
 
 export const EthpoolGlyphIcon = createIcon({

diff --git a/src/components/icons/staking/SquidGlyphIcon.tsx b/src/components/icons/staking/SquidGlyphIcon.tsx
@@ -1,3 +1,4 @@
+import React from "react"
 import { createIcon } from "@chakra-ui/react"
 
 export const SquidGlyphIcon = createIcon({

diff --git a/yarn.lock b/yarn.lock
@@ -772,7 +772,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.17.12":
+"@babel/plugin-syntax-jsx@^7.0.0":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
   integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
@@ -1077,7 +1077,7 @@
   dependencies:
     "@babel/plugin-transform-react-jsx" "^7.18.6"
 
-"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.17.12", "@babel/plugin-transform-react-jsx@^7.18.6", "@babel/plugin-transform-react-jsx@^7.19.0":
+"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.18.6", "@babel/plugin-transform-react-jsx@^7.19.0":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.21.0.tgz#656b42c2fdea0a6d8762075d58ef9d4e3c4ab8a2"
   integrity sha512-6OAWljMvQrZjR2DaNhVfRz6dkCAVV+ymcLUmaf8bccGOHn2v5rHJK3tTpij0BuhdYWP4LLaqj5lwcdlpAAPuvg==
@@ -2355,14 +2355,7 @@
     "@docsearch/css" "3.3.3"
     algoliasearch "^4.0.0"
 
-"@emotion/babel-plugin-jsx-pragmatic@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.2.0.tgz#6fdd78600417973fa2610704693158181d8505b7"
-  integrity sha512-VPfKAtb/bVyu5y+HzCPj9bb2nHnj9yX5mMAU7N0pIDcrFZo8aqDyHXLYF8BD7tY4pNL09N87dygVLKIkQvshJw==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.17.12"
-
-"@emotion/babel-plugin@^11.10.0", "@emotion/babel-plugin@^11.10.6":
+"@emotion/babel-plugin@^11.10.6":
   version "11.10.6"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz#a68ee4b019d661d6f37dec4b8903255766925ead"
   integrity sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==
@@ -2379,16 +2372,6 @@
     source-map "^0.5.7"
     stylis "4.1.3"
 
-"@emotion/babel-preset-css-prop@^11.10.0":
-  version "11.10.0"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-11.10.0.tgz#23922787561d8376782b0e9006323512fe797275"
-  integrity sha512-oN2lCP0NJTEt80IIeFM1RbmapeEVNYzKXYk2pYirAuom9WvV9Oz/aJQN5Hn3RyBMPaY+Of1OZYpTVMle2jUm4g==
-  dependencies:
-    "@babel/plugin-transform-react-jsx" "^7.17.12"
-    "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.0"
-    "@emotion/babel-plugin-jsx-pragmatic" "^0.2.0"
-
 "@emotion/cache@^11.10.5", "@emotion/cache@^11.4.0":
   version "11.10.5"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.5.tgz#c142da9351f94e47527ed458f7bbbbe40bb13c12"
@@ -10707,14 +10690,6 @@ gatsby-parcel-config@^1.7.0:
     "@parcel/transformer-js" "2.8.3"
     "@parcel/transformer-json" "2.8.3"
 
-gatsby-plugin-emotion@^8.4.0:
-  version "8.7.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-emotion/-/gatsby-plugin-emotion-8.7.0.tgz#bd62fbc3779917b8c27af60339dca99f28937cb7"
-  integrity sha512-zioDFPOXcCanN4/mq3vm5tayo2b8rejqCIkX6qLKSVvud9f0cWpX4RJzN52UUodQ93B1wpRoMUrTMtecThy0vg==
-  dependencies:
-    "@babel/runtime" "^7.20.13"
-    "@emotion/babel-preset-css-prop" "^11.10.0"
-
 gatsby-plugin-gatsby-cloud@^5.4.0:
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-gatsby-cloud/-/gatsby-plugin-gatsby-cloud-5.7.0.tgz#24133d48ccc83286158beffc362b0050c6b7de25"