chore: migrate from styled-components to emotion

gatsby-config.js

@@ -98,6 +98,7 @@ module.exports = {
     },
     `gatsby-plugin-react-helmet`,
     `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`
+    `gatsby-plugin-sharp`,
+    `gatsby-plugin-emotion`
   ]
 };

package-lock.json

@@ -1134,29 +1134,151 @@
         "to-fast-properties": "^2.0.0"
       }
     },
-    "@emotion/is-prop-valid": {
+    "@emotion/babel-plugin": {
-      "version": "0.8.8",
+      "version": "11.1.2",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.1.2.tgz",
-      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "integrity": "sha512-Nz1k7b11dWw8Nw4Z1R99A9mlB6C6rRsCtZnwNUOj4NsoZdrO2f2A/83ST7htJORD5zpOiLKY59aJN23092949w==",
       "requires": {
-        "@emotion/memoize": "0.7.4"
+        "@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"
+      },
+      "dependencies": {
+        "@emotion/memoize": {
+          "version": "0.7.5",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+          "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
         }
+      }
+    },
+    "@emotion/babel-plugin-jsx-pragmatic": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.1.5.tgz",
+      "integrity": "sha512-y+3AJ0SItMDaAgGPVkQBC/S/BaqaPACkQ6MyCI2CUlrjTxKttTVfD3TMtcs7vLEcLxqzZ1xiG0vzwCXjhopawQ==",
+      "requires": {
+        "@babel/plugin-syntax-jsx": "^7.2.0"
+      }
+    },
+    "@emotion/babel-preset-css-prop": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-11.0.0.tgz",
+      "integrity": "sha512-E7z3jMf1OyThGpp3ngYGxOSGX5AdoSQTuqM9QgJNAHFh3Fi8N5CbWx6g+IdySJ8bjPiMgFQsIeEhkyy+4mDpCQ==",
+      "requires": {
+        "@babel/plugin-transform-react-jsx": "^7.12.1",
+        "@babel/runtime": "^7.7.2",
+        "@emotion/babel-plugin": "^11.0.0",
+        "@emotion/babel-plugin-jsx-pragmatic": "^0.1.5"
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.1.3.tgz",
+      "integrity": "sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==",
+      "requires": {
+        "@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/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
     "@emotion/memoize": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
       "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
     },
-    "@emotion/stylis": {
+    "@emotion/react": {
-      "version": "0.8.5",
+      "version": "11.1.4",
-      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.1.4.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+      "integrity": "sha512-9gkhrW8UjV4IGRnEe4/aGPkUxoGS23aD9Vu6JCGfEDyBYL+nGkkRBoMFGAzCT9qFdyUvQp4UUtErbKWxq/JS4A==",
+      "requires": {
+        "@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": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.0.tgz",
+      "integrity": "sha512-zt1gm4rhdo5Sry8QpCOpopIUIKU+mUSpV9WNmFILUraatm5dttNEaYzUWWSboSMUE6PtN2j1cAsuvcugfdI3mw==",
+      "requires": {
+        "@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": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz",
+      "integrity": "sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g=="
+    },
+    "@emotion/styled": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.0.0.tgz",
+      "integrity": "sha512-498laccxJlBiJqrr2r/fx9q+Pr55D0URP2UyOkoSGLjevb8LLAFWueqthsQ5XijE66iGo7y3rzzEYdA7CHmZEQ==",
+      "requires": {
+        "@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"
+      },
+      "dependencies": {
+        "@emotion/is-prop-valid": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.0.0.tgz",
+          "integrity": "sha512-G5X0t7eR9pkhUvAY32QS3lToP9JyNF8It5CcmMvbWjmC9/Yq7IhevaKqxl+me2BKR93iTPiL/h3En1ZX/1G3PQ==",
+          "requires": {
+            "@emotion/memoize": "^0.7.4"
+          }
+        }
+      }
     },
     "@emotion/unitless": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
+    "@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@endemolshinegroup/cosmiconfig-typescript-loader": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz",
@@ -3410,22 +3532,6 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.13.0.tgz",
       "integrity": "sha512-6sL3JVKDa3OjXtmBYrr467BnQeUjNI7p2dy+aBwbB8WqChHLJOFh5+lxfzC0z/7hBehqmWpBV7xHfZdIP1lAzQ=="
     },
-    "babel-plugin-styled-components": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
-      "integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.0.0",
-        "@babel/helper-module-imports": "^7.0.0",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "lodash": "^4.17.11"
-      }
-    },
-    "babel-plugin-syntax-jsx": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
-    },
     "babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -4445,11 +4551,6 @@
         }
       }
     },
-    "camelize": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
-      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
-    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -5410,11 +5511,6 @@
         }
       }
     },
-    "css-color-keywords": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
-    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -5539,16 +5635,6 @@
         "fastparse": "^1.1.2"
       }
     },
-    "css-to-react-native": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
-      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
-      "requires": {
-        "camelize": "^1.0.0",
-        "css-color-keywords": "^1.0.0",
-        "postcss-value-parser": "^4.0.2"
-      }
-    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -7809,6 +7895,11 @@
         "pkg-dir": "^4.1.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -8735,6 +8826,15 @@
         "micromatch": "^4.0.2"
       }
     },
+    "gatsby-plugin-emotion": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-emotion/-/gatsby-plugin-emotion-5.3.0.tgz",
+      "integrity": "sha512-zDbEOb5MvL4ve1OTZCtgVuEJUoyBgqJBByPO+xq87TsuKPJyzE2aRD7mtCcwivh4Yo7KBl1X9bl3EiOm5m50IA==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "@emotion/babel-preset-css-prop": "^11.0.0"
+      }
+    },
     "gatsby-plugin-manifest": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.10.0.tgz",
@@ -17401,38 +17501,6 @@
         "inline-style-parser": "0.1.1"
       }
     },
-    "styled-components": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz",
-      "integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@babel/traverse": "^7.4.5",
-        "@emotion/is-prop-valid": "^0.8.8",
-        "@emotion/stylis": "^0.8.4",
-        "@emotion/unitless": "^0.7.4",
-        "babel-plugin-styled-components": ">= 1",
-        "css-to-react-native": "^3.0.0",
-        "hoist-non-react-statics": "^3.0.0",
-        "shallowequal": "^1.1.0",
-        "supports-color": "^5.5.0"
-      },
-      "dependencies": {
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -17455,6 +17523,11 @@
         }
       }
     },
+    "stylis": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.6.tgz",
+      "integrity": "sha512-1igcUEmYFBEO14uQHAJhCUelTR5jPztfdVKrYxRnDa5D5Dn3w0NxXupJNPr/VV/yRfZYEAco8sTIRZzH3sRYKg=="
+    },
     "sudo-prompt": {
       "version": "8.2.5",
       "resolved": "https://registry.npmjs.org/sudo-prompt/-/sudo-prompt-8.2.5.tgz",

package.json

@@ -17,9 +17,12 @@
     ]
   },
   "dependencies": {
+    "@emotion/react": "^11.1.4",
+    "@emotion/styled": "^11.0.0",
     "@fontsource/cooper-hewitt": "^4.1.0",
     "gatsby": "^2.29.3",
     "gatsby-image": "^2.8.0",
+    "gatsby-plugin-emotion": "^5.3.0",
     "gatsby-plugin-manifest": "^2.10.0",
     "gatsby-plugin-react-helmet": "^3.7.0",
     "gatsby-plugin-react-svg": "^3.0.0",
@@ -30,8 +33,7 @@
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
     "react-slick": "^0.27.13",
-    "slick-carousel": "^1.8.1",
+    "slick-carousel": "^1.8.1"
-    "styled-components": "^5.2.1"
   },
   "devDependencies": {
     "eslint": "^7.17.0",

src/components/button.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.button`
   background-color: transparent;

src/components/card.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link as GatsbyLink } from "gatsby";
 import Img from "gatsby-image";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.div`
   display: flex;

src/components/content.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.div`
   transform: ${props =>

src/components/custom-slick.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import Slick from "react-slick";
-import styled, { css } from "styled-components";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 import LeftArrow from "../icons/left-arrow.svg";
 import RightArrow from "../icons/right-arrow.svg";
 import "slick-carousel/slick/slick.css";

src/components/footer.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.footer`
   background-color: var(--color-white);

src/components/header-logo.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
-import styled, { css } from "styled-components";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 import LogoArrows from "../icons/logo-arrows.svg";
 
 const Container = styled.div`

src/components/header.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Img from "gatsby-image";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.header`
   position: relative;
@@ -29,7 +29,7 @@ export default function Header({ image, children }) {
 /*
 
 import React, { useState } from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import MenuButton from "./menu-button";
 import Nav from "./nav";
 

src/components/icon-with-content.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import { Icon } from "./";
 
 const Container = styled.div`

src/components/icon.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.span`
   display: inline-block;

src/components/input-text.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.div`
   max-width: 320px;

src/components/link.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import { Link as GatsbyLink } from "gatsby";
 
 const StyledLink = styled.a`

src/components/menu-button.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.button`
   position: relative;

src/components/nav-item.js

@@ -1,5 +1,6 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 import NavLink from "./nav-link";
 
 const SubList = styled.ul`

src/components/nav-link.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link as GatsbyLink } from "gatsby";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Link = styled(GatsbyLink)`
   display: inline-block;

src/components/nav.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "gatsby";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import NavItem from "./nav-item";
 import MenuButton from "./menu-button";
 import LogoArrows from "../icons/logo-arrows.svg";

src/components/review-summary.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import Text from "./text";
 import RatedPeople from "../icons/rated-people.svg";
 import Bark from "../icons/bark.svg";

src/components/section.js

@@ -1,5 +1,6 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 
 const Container = styled.div`
   padding: var(--spacing-y-lg) var(--spacing-x-sm);

src/components/text.js

@@ -1,5 +1,6 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 
 const StyledText = styled.p`
   margin-bottom: var(--spacing-y-xs);

src/layout.js

@@ -2,12 +2,12 @@ import React, { useState } from "react";
 import { useStaticQuery, graphql } from "gatsby";
 import { Helmet } from "react-helmet";
 import { Footer, Nav } from "./components";
-import { createGlobalStyle } from "styled-components";
+import { css, Global } from "@emotion/react";
 import "@fontsource/cooper-hewitt/400.css";
 import "@fontsource/cooper-hewitt/400-italic.css";
 import "@fontsource/cooper-hewitt/700.css";
 
-const GlobalStyle = createGlobalStyle`
+const GlobalStyles = css`
   :root {
     --theme-max-width: 960px;
     --theme-color-primary: #9c0905;
@@ -66,12 +66,13 @@ const GlobalStyle = createGlobalStyle`
   body {
     box-sizing: border-box;
     margin: 0;
-    font-family: 'Cooper Hewitt', sans-serif; 
+    font-family: "Cooper Hewitt", sans-serif;
     overflow-x: hidden;
-    overflow-y: ${props => (props.navOpen ? "hidden" : "auto")};
   }
 
-  *, *:before, *:after {
+  *,
+  *:before,
+  *:after {
     box-sizing: inherit;
   }
 
@@ -108,7 +109,6 @@ export default function Layout({ children }) {
   `);
   const { title, description, keywords, navData } = data.site.siteMetadata;
   const [navOpen, setNavOpen] = useState();
-  const [loaded, setLoaded] = useState();
   return (
     <>
       <main>
@@ -121,17 +121,21 @@ export default function Layout({ children }) {
           htmlAttributes={{
             lang: "en"
           }}
-          onChangeClientState={() => setLoaded(true)}
         />
-        <GlobalStyle navOpen={navOpen} />
+        <Global styles={GlobalStyles} />
-        {loaded && (
+        <Global
-          <>
+          styles={
+            navOpen && {
+              body: {
+                "overflow-y": "hidden"
+              }
+            }
+          }
+        />
         {children}
         <Footer />
-          </>
-        )}
       </main>
-      {loaded && <Nav data={navData} open={navOpen} setOpen={setNavOpen} />}
+      <Nav data={navData} open={navOpen} setOpen={setNavOpen} />
     </>
   );
 }