Added test to pre commit

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+public
+.cache
+coverage

.prettierignore

@@ -0,0 +1,4 @@
+node_modules/
+public/
+.cache/
+coverage/

.storybook/config.js

@@ -1,23 +0,0 @@
-import { configure } from "@storybook/react"
-import { action } from "@storybook/addon-actions"
-
-// automatically import all files ending in *.stories.js
-const req = require.context("../src", true, /.stories.(js|ts|jsx|tsx)$/)
-function loadStories() {
-  req.keys().forEach(filename => req(filename))
-}
-
-// Gatsby's Link overrides:
-// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
-global.___loader = {
-  enqueue: () => {},
-  hovering: () => {},
-}
-// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
-global.__PATH_PREFIX__ = ""
-global.__BASE_PATH__ = ""
-// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
-window.___navigate = pathname => {
-  action("NavigateTo:")(pathname)
-}
-configure(loadStories, module)

.storybook/main.js

@@ -0,0 +1,44 @@
+module.exports = {
+  stories: ["../src/**/*.stories.js", "../src/**/*.stories.tsx"],
+  addons: ["@storybook/addon-actions", "@storybook/addon-links"],
+
+  webpackFinal: async config => {
+    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
+    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
+
+    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
+    config.module.rules[0].use[0].loader = require.resolve("babel-loader")
+
+    // use @babel/preset-react for JSX and env (instead of staged presets)
+    config.module.rules[0].use[0].options.presets = [
+      require.resolve("@babel/preset-react"),
+      require.resolve("@babel/preset-env"),
+    ]
+
+    config.module.rules[0].use[0].options.plugins = [
+      // use @babel/plugin-proposal-class-properties for class arrow functions
+      require.resolve("@babel/plugin-proposal-class-properties"),
+      // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
+      require.resolve("babel-plugin-remove-graphql-queries"),
+    ]
+
+    // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
+    config.resolve.mainFields = ["browser", "module", "main"]
+
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      loader: require.resolve("babel-loader"),
+      options: {
+        presets: [["react-app", { flow: false, typescript: true }]],
+        plugins: [
+          require.resolve("@babel/plugin-proposal-class-properties"),
+          // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
+          require.resolve("babel-plugin-remove-graphql-queries"),
+        ],
+      },
+    })
+    config.resolve.extensions.push(".ts", ".tsx")
+
+    return config
+  },
+}

.storybook/preview.js

@@ -0,0 +1,21 @@
+import { action } from "@storybook/addon-actions"
+
+// Gatsby's Link overrides:
+// Gatsby Link calls the `enqueue` & `hovering` methods on the global variable ___loader.
+// This global object isn't set in storybook context, requiring you to override it to empty functions (no-op),
+// so Gatsby Link doesn't throw any errors.
+global.___loader = {
+  enqueue: () => {},
+  hovering: () => {},
+}
+
+// __PATH_PREFIX__ is used inside gatsby-link an other various places. For storybook not to crash, you need to set it as well.
+global.__PATH_PREFIX__ = ""
+global.__BASE_PATH__ = ""
+
+// Navigating through a gatsby app using gatsby-link or any other gatsby component will use the `___navigate` method.
+// In Storybook it makes more sense to log an action than doing an actual navigate. Checkout the actions addon docs for more info: https://github.com/storybookjs/storybook/tree/master/addons/actions.
+
+window.___navigate = pathname => {
+  action("NavigateTo:")(pathname)
+}

.storybook/webpack.config.js

@@ -1,39 +0,0 @@
-module.exports = ({ config }) => {
-  // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
-  config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
-
-  // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
-  config.module.rules[0].use[0].loader = require.resolve("babel-loader")
-
-  // use @babel/preset-react for JSX and env (instead of staged presets)
-  config.module.rules[0].use[0].options.presets = [
-    require.resolve("@babel/preset-react"),
-    require.resolve("@babel/preset-env"),
-  ]
-
-  config.module.rules[0].use[0].options.plugins = [
-    // use @babel/plugin-proposal-class-properties for class arrow functions
-    require.resolve("@babel/plugin-proposal-class-properties"),
-    // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
-    require.resolve("babel-plugin-remove-graphql-queries"),
-  ]
-
-  // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
-  config.resolve.mainFields = ["browser", "module", "main"]
-
-  config.module.rules.push({
-    test: /\.(ts|tsx)$/,
-    loader: require.resolve("babel-loader"),
-    options: {
-      presets: [["react-app", { flow: false, typescript: true }]],
-      plugins: [
-        require.resolve("@babel/plugin-proposal-class-properties"),
-        // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
-        require.resolve("babel-plugin-remove-graphql-queries"),
-      ],
-    },
-  })
-  config.resolve.extensions.push(".ts", ".tsx")
-
-  return config
-}

README.md

@@ -4,6 +4,7 @@ Kick off your project with this opinionated boilerplate. This starter ships with
 
 ## Stuff I added
 
+- [Emotion](https://emotion.sh/)
 - [ESLint](https://eslint.org/)
 - [Husky](https://github.com/typicode/husky)
 - [Jest](https://jestjs.io/)
@@ -72,11 +73,11 @@ A quick look at the top-level files and directories you'll see.
 
 4.  **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
 
-5.  **`.eslintrc.json`**: This is a [configuration file](https://eslint.org/docs/user-guide/configuring) for [ESLint](https://eslint.org/). Prettier is a tool to help keep the formatting of your code consistent.
+5.  **`.eslintrc.json` & `.eslintignore`**: These are [configuration files](https://eslint.org/docs/user-guide/configuring) for [ESLint](https://eslint.org/). ESLint is a tool to help keep the formatting of your code consistent.
 
 6.  **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
 
-7.  **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
+7.  **`.prettierrc` & `.prettierignore`**: These are configuration files for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
 
 8.  **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
 
@@ -86,7 +87,7 @@ A quick look at the top-level files and directories you'll see.
 
 11. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
 
-12. **`jest.config.js` & `jest-preprocess.js` & `loadershim.js`**: These are configuration files for [Jest](https://jestjs.io/).
+12. **`jest.config.js` & `jest-preprocess.js` & `loadershim.js` & `setup-test-env.js`**: These are configuration files for [Jest](https://jestjs.io/).
 
 13. **`LICENSE`**: Gatsby is licensed under the MIT license.
 

gatsby-config.js

@@ -30,6 +30,7 @@ module.exports = {
       },
     },
     "gatsby-plugin-eslint",
+    "gatsby-plugin-emotion",
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

jest-preprocess.js

@@ -1,5 +1,6 @@
 const babelOptions = {
   presets: ["babel-preset-gatsby", "@babel/preset-typescript"],
+  plugins: ["emotion"],
 }
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires

package.json

@@ -20,6 +20,8 @@
   "devDependencies": {
     "@babel/core": "^7.10.2",
     "@babel/preset-typescript": "^7.10.1",
+    "@emotion/core": "^10.0.28",
+    "@emotion/styled": "^10.0.27",
     "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-links": "^5.3.19",
     "@storybook/addons": "^5.3.19",
@@ -30,7 +32,10 @@
     "@types/react-test-renderer": "^16.9.2",
     "@typescript-eslint/eslint-plugin": "^3.1.0",
     "@typescript-eslint/parser": "^3.1.0",
+    "babel-jest": "^26.0.1",
     "babel-loader": "^8.1.0",
+    "babel-plugin-emotion": "^10.0.33",
+    "babel-preset-gatsby": "^0.4.8",
     "babel-preset-react-app": "^9.1.2",
     "eslint": "^7.1.0",
     "eslint-config-prettier": "^6.11.0",
@@ -43,6 +48,7 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4.0.4",
+    "gatsby-plugin-emotion": "^4.3.3",
     "gatsby-plugin-eslint": "^2.0.8",
     "husky": ">=4",
     "identity-obj-proxy": "^3.0.0",
@@ -69,8 +75,8 @@
     "clean": "gatsby clean",
     "test": "jest",
     "test:coverage": "jest --coverage",
-    "storybook": "NODE_ENV=production start-storybook -s public -p 6006",
-    "build-storybook": "NODE_ENV=production build-storybook -s public"
+    "storybook": "NODE_ENV=production start-storybook -p 6006",
+    "build-storybook": "NODE_ENV=production build-storybook"
   },
   "repository": {
     "type": "git",
@@ -81,7 +87,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "tsc && lint-staged"
+      "pre-commit": "tsc && jest --coverage &&  lint-staged"
     }
   },
   "lint-staged": {
@@ -90,5 +96,10 @@
       "eslint --fix"
     ],
     "*.{json,md,mdx,css,yml}": "prettier --write"
+  },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "<rootDir>/setup-test-env.js"
+    ]
   }
 }

setup-test-env.js

@@ -0,0 +1,4 @@
+import { createSerializer } from "jest-emotion"
+import * as emotion from "@emotion/core"
+
+expect.addSnapshotSerializer(createSerializer(emotion))

src/__stories__/404.stories.tsx

@@ -1,5 +1,5 @@
 import { storiesOf } from "@storybook/react"
 import React from "react"
-import NotFoundPage from "./404"
+import NotFoundPage from "../pages/404"
 
 storiesOf("404 page", module).add(`default`, () => <NotFoundPage />)

src/__stories__/index.stories.tsx

@@ -1,5 +1,5 @@
 import { storiesOf } from "@storybook/react"
 import React from "react"
-import IndexPage from "./index"
+import IndexPage from "../pages"
 
 storiesOf("Index page", module).add(`default`, () => <IndexPage />)

src/__stories__/page-2.stories.tsx

@@ -1,5 +1,5 @@
 import { storiesOf } from "@storybook/react"
 import React from "react"
-import SecondPage from "./page-2"
+import SecondPage from "../pages/page-2"
 
 storiesOf("Second page", module).add(`default`, () => <SecondPage />)

src/__stories__/using-typescript.stories.tsx

@@ -1,7 +1,7 @@
 import { storiesOf } from "@storybook/react"
 import React from "react"
-import UsingTypescript from "./using-typescript"
 import { UsingTypescriptDataInterface } from "../@types/pages/using-typescript"
+import UsingTypescript from "../pages/using-typescript"
 
 const data: UsingTypescriptDataInterface = {
   data: {

src/components/__snapshots__/header.test.tsx.snap

@@ -1,42 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Header renders correctly 1`] = `
+Array [
+  <style
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": ".css-1pcnel4-Header{background:rebeccapurple;margin-bottom:1.45rem;}",
+      }
+    }
+    data-emotion-css="1pcnel4-Header"
+  />,
   <header
-  style={
-    Object {
-      "background": "rebeccapurple",
-      "marginBottom": "1.45rem",
-    }
-  }
+    className="css-1pcnel4-Header e1qr1m9j0"
   >
+    <style
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": ".css-pf9rd5-Container{margin:0 auto;max-width:960;padding:1.45rem 1.0875rem;}",
+        }
+      }
+      data-emotion-css="pf9rd5-Container"
+    />
     <div
-    style={
-      Object {
-        "margin": "0 auto",
-        "maxWidth": 960,
-        "padding": "1.45rem 1.0875rem",
-      }
-    }
+      className="css-pf9rd5-Container e1qr1m9j1"
     >
+      <style
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": ".css-1ikcnub-H1{margin:0;}",
+          }
+        }
+        data-emotion-css="1ikcnub-H1"
+      />
       <h1
-      style={
-        Object {
-          "margin": 0,
-        }
-      }
+        className="css-1ikcnub-H1 e1qr1m9j2"
       >
-      <a
-        href="/"
-        style={
+        <style
+          dangerouslySetInnerHTML={
             Object {
-            "color": "white",
-            "textDecoration": "none",
+              "__html": ".css-rkbe0q-StyledLink{color:white;-webkit-text-decoration:none;text-decoration:none;}",
             }
           }
+          data-emotion-css="rkbe0q-StyledLink"
+        />
+        <a
+          className="css-rkbe0q-StyledLink e1qr1m9j3"
+          href="/"
         >
           Default Starter
         </a>
       </h1>
     </div>
-</header>
+  </header>,
+]
 `;

src/components/__snapshots__/image.test.tsx.snap

@@ -1,60 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Header renders correctly 1`] = `
-<div
-  className=" gatsby-image-wrapper"
-  style={
-    Object {
-      "maxHeight": null,
-      "maxWidth": null,
-      "overflow": "hidden",
-      "position": "relative",
-    }
-  }
->
-  <div
-    aria-hidden={true}
-    style={
-      Object {
-        "paddingBottom": "100%",
-        "width": "100%",
-      }
-    }
-  />
-  <img
-    alt=""
-    aria-hidden={true}
-    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsSAAALEgHS3X78AAACYklEQVQ4y42Uy28SQRjA+dM8efDmwYN6qF6qiSY+Y/WgQRMibY00TaWNBSRSCraYQtHl/bR0KyxQWCgWWAqU8izl/Sq7rLNsRHlVJpvJtzPfb77nDIOcZHSoqZSrp4+KtXIziubaLRysMCZiCYqOoVnhjNEi8RcztdxxeTzc6VBfT+5O2Vhpb+vw4wMdZ0ppWvP9xzLeJoDNThf2W+Nz1+XzNxQubSToSKKW+BDc+WOnkshhSVgeCiGpViZMEg1oxc26Knt+ae3bEtJTZwzE1kXLccG0+sOOlrcvZXvsczPkITfsa20vwIKnhsh+BnjUarT74Gb13CY7KBVJMv3z4N1NszQYsMWM62HNrCis/GxXn0iYls23uz5LPBcv0bH8hUH2XRoM85ySXv7JBtO87jMIvWq+H5GoYIHCLA1ZxD6Qap3Ak8IKfW7TJ50lK6uP9E6RgndHaODtCJ6Z5RyHfnE7j6gRbcKlCYNSt+rtETHTpUGgEP8FYmdNqd/Mo7aiVWTfuH2L9xASvfxxlqr01EYkrJszvNkgW9bH0OuFr+99m+y9IOeyU6zIp/Hubp/yMEztlzFPwOhdvq+nIoS1JNn4t2sugCmVsDvPe2KKolnZLCxhOcAKQRDDXTQaVi46lqYhIBwHTrl3oWqhMRDtaJge37lOBMKo4tfbqhVX0J7snTsWps8uZWuoOQY6CcjpSIF55UvmqNgr5wUwtV1IVdnXtnSfPEB2qjDNqnvczRl0m+j6Jn5lXb6nAQJqinmN0ZEBj03YLzghY8PnTRz80o/GRJZpOLCb0PM9BN7pvUEjx28V00WUg9jIVwAAAABJRU5ErkJggg=="
-    style={
-      Object {
-        "height": "100%",
-        "left": 0,
-        "objectFit": "cover",
-        "objectPosition": "center",
-        "opacity": 1,
-        "position": "absolute",
-        "top": 0,
-        "transitionDelay": "500ms",
-        "width": "100%",
-      }
-    }
-  />
-  <noscript
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "<picture><source type='image/webp' srcset=\\"/static/6d91c86c0fde632ba4cd01062fd9ccfa/61e93/gatsby-astronaut.webp 200w,
-/static/6d91c86c0fde632ba4cd01062fd9ccfa/1f5c5/gatsby-astronaut.webp 400w,
-/static/6d91c86c0fde632ba4cd01062fd9ccfa/58556/gatsby-astronaut.webp 800w\\" sizes=\\"(max-width: 800px) 100vw, 800px\\" /><source srcset=\\"/static/6d91c86c0fde632ba4cd01062fd9ccfa/69585/gatsby-astronaut.png 200w,
-/static/6d91c86c0fde632ba4cd01062fd9ccfa/497c6/gatsby-astronaut.png 400w,
-/static/6d91c86c0fde632ba4cd01062fd9ccfa/ee604/gatsby-astronaut.png 800w\\" sizes=\\"(max-width: 800px) 100vw, 800px\\" /><img loading=\\"lazy\\" sizes=\\"(max-width: 800px) 100vw, 800px\\" srcset=\\"/static/6d91c86c0fde632ba4cd01062fd9ccfa/69585/gatsby-astronaut.png 200w,
-/static/6d91c86c0fde632ba4cd01062fd9ccfa/497c6/gatsby-astronaut.png 400w,
-/static/6d91c86c0fde632ba4cd01062fd9ccfa/ee604/gatsby-astronaut.png 800w\\" src=\\"/static/6d91c86c0fde632ba4cd01062fd9ccfa/ee604/gatsby-astronaut.png\\" alt=\\"\\" style=\\"position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center\\"/></picture>",
-      }
-    }
-  />
-</div>
-`;
-
 exports[`Image renders correctly 1`] = `
 <div
   className=" gatsby-image-wrapper"

src/components/__snapshots__/layout.test.tsx.snap

@@ -2,52 +2,66 @@
 
 exports[`Layout renders correctly 1`] = `
 Array [
+  <style
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": ".css-1pcnel4-Header{background:rebeccapurple;margin-bottom:1.45rem;}",
+      }
+    }
+    data-emotion-css="1pcnel4-Header"
+  />,
   <header
-    style={
-      Object {
-        "background": "rebeccapurple",
-        "marginBottom": "1.45rem",
-      }
-    }
+    className="css-1pcnel4-Header e1qr1m9j0"
   >
+    <style
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": ".css-pf9rd5-Container{margin:0 auto;max-width:960;padding:1.45rem 1.0875rem;}",
+        }
+      }
+      data-emotion-css="pf9rd5-Container"
+    />
     <div
-      style={
-        Object {
-          "margin": "0 auto",
-          "maxWidth": 960,
-          "padding": "1.45rem 1.0875rem",
-        }
-      }
+      className="css-pf9rd5-Container e1qr1m9j1"
     >
+      <style
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": ".css-1ikcnub-H1{margin:0;}",
+          }
+        }
+        data-emotion-css="1ikcnub-H1"
+      />
       <h1
-        style={
-          Object {
-            "margin": 0,
-          }
-        }
+        className="css-1ikcnub-H1 e1qr1m9j2"
       >
-        <a
-          href="/"
-          style={
+        <style
+          dangerouslySetInnerHTML={
             Object {
-              "color": "white",
-              "textDecoration": "none",
+              "__html": ".css-rkbe0q-StyledLink{color:white;-webkit-text-decoration:none;text-decoration:none;}",
             }
           }
+          data-emotion-css="rkbe0q-StyledLink"
+        />
+        <a
+          className="css-rkbe0q-StyledLink e1qr1m9j3"
+          href="/"
         >
           Gatsby Default Starter
         </a>
       </h1>
     </div>
   </header>,
-  <div
-    style={
+  <style
+    dangerouslySetInnerHTML={
       Object {
-        "margin": "0 auto",
-        "maxWidth": 960,
-        "padding": "0 1.0875rem 1.45rem",
+        "__html": ".css-15zhpu-Container{margin:0 auto;max-width:960;padding:0 1.0875rem 1.45rem;}",
       }
     }
+    data-emotion-css="15zhpu-Container"
+  />,
+  <div
+    className="css-15zhpu-Container e9jw82o0"
   >
     <main>
       children

src/components/__snapshots__/seo.test.tsx.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Layout renders correctly 1`] = `null`;

src/components/header.tsx

@@ -1,34 +1,38 @@
 import { Link } from "gatsby"
 import React from "react"
 import { HeaderInterface } from "../@types/components/header"
+import styled from "@emotion/styled"
 
-const Header: React.FC<HeaderInterface> = ({ siteTitle }) => (
-  <header
-    style={{
-      background: "rebeccapurple",
-      marginBottom: "1.45rem",
-    }}
-  >
-    <div
-      style={{
-        margin: "0 auto",
-        maxWidth: 960,
-        padding: "1.45rem 1.0875rem",
-      }}
-    >
-      <h1 style={{ margin: 0 }}>
-        <Link
-          to="/"
-          style={{
-            color: "white",
-            textDecoration: "none",
-          }}
-        >
-          {siteTitle}
-        </Link>
-      </h1>
-    </div>
-  </header>
+const Header: React.FC<HeaderInterface> = ({ siteTitle }) => {
+  const Header = styled.header`
+    background: rebeccapurple;
+    margin-bottom: 1.45rem;
+  `
+
+  const Container = styled.div`
+    margin: 0 auto;
+    max-width: 960;
+    padding: 1.45rem 1.0875rem;
+  `
+
+  const H1 = styled.h1`
+    margin: 0;
+  `
+
+  const StyledLink = styled(Link)`
+    color: white;
+    text-decoration: none;
+  `
+
+  return (
+    <Header>
+      <Container>
+        <H1>
+          <StyledLink to="/">{siteTitle}</StyledLink>
+        </H1>
+      </Container>
+    </Header>
   )
+}
 
 export default Header

src/components/layout.tsx

@@ -14,6 +14,7 @@ import {
   LayoutDataInterface,
   LayoutInterface,
 } from "../@types/components/layout"
+import styled from "@emotion/styled"
 
 const Layout: React.FC<LayoutInterface> = ({ children }) => {
   const data: LayoutDataInterface = useStaticQuery(graphql`
@@ -26,22 +27,22 @@ const Layout: React.FC<LayoutInterface> = ({ children }) => {
     }
   `)
 
+  const Container = styled.div`
+    margin: 0 auto;
+    max-width: 960;
+    padding: 0 1.0875rem 1.45rem;
+  `
+
   return (
     <>
       <Header siteTitle={data.site.siteMetadata.title} />
-      <div
-        style={{
-          margin: "0 auto",
-          maxWidth: 960,
-          padding: "0 1.0875rem 1.45rem",
-        }}
-      >
+      <Container>
         <main>{children}</main>
         <footer>
           © {new Date().getFullYear()}, Built with{" "}
           <a href="https://www.gatsbyjs.org">Gatsby</a>
         </footer>
-      </div>
+      </Container>
     </>
   )
 }

src/pages/__snapshots__/404.test.tsx.snap

@@ -2,52 +2,66 @@
 
 exports[`NotFoundPage renders correctly 1`] = `
 Array [
+  <style
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": ".css-1pcnel4-Header{background:rebeccapurple;margin-bottom:1.45rem;}",
+      }
+    }
+    data-emotion-css="1pcnel4-Header"
+  />,
   <header
-    style={
-      Object {
-        "background": "rebeccapurple",
-        "marginBottom": "1.45rem",
-      }
-    }
+    className="css-1pcnel4-Header e1qr1m9j0"
   >
+    <style
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": ".css-pf9rd5-Container{margin:0 auto;max-width:960;padding:1.45rem 1.0875rem;}",
+        }
+      }
+      data-emotion-css="pf9rd5-Container"
+    />
     <div
-      style={
-        Object {
-          "margin": "0 auto",
-          "maxWidth": 960,
-          "padding": "1.45rem 1.0875rem",
-        }
-      }
+      className="css-pf9rd5-Container e1qr1m9j1"
     >
+      <style
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": ".css-1ikcnub-H1{margin:0;}",
+          }
+        }
+        data-emotion-css="1ikcnub-H1"
+      />
       <h1
-        style={
-          Object {
-            "margin": 0,
-          }
-        }
+        className="css-1ikcnub-H1 e1qr1m9j2"
       >
-        <a
-          href="/"
-          style={
+        <style
+          dangerouslySetInnerHTML={
             Object {
-              "color": "white",
-              "textDecoration": "none",
+              "__html": ".css-rkbe0q-StyledLink{color:white;-webkit-text-decoration:none;text-decoration:none;}",
             }
           }
+          data-emotion-css="rkbe0q-StyledLink"
+        />
+        <a
+          className="css-rkbe0q-StyledLink e1qr1m9j3"
+          href="/"
         >
           Gatsby Default Starter
         </a>
       </h1>
     </div>
   </header>,
-  <div
-    style={
+  <style
+    dangerouslySetInnerHTML={
       Object {
-        "margin": "0 auto",
-        "maxWidth": 960,
-        "padding": "0 1.0875rem 1.45rem",
+        "__html": ".css-15zhpu-Container{margin:0 auto;max-width:960;padding:0 1.0875rem 1.45rem;}",
       }
     }
+    data-emotion-css="15zhpu-Container"
+  />,
+  <div
+    className="css-15zhpu-Container e9jw82o0"
   >
     <main>
       <h1>

src/pages/__snapshots__/index.test.tsx.snap

@@ -2,52 +2,66 @@
 
 exports[`IndexPage renders correctly 1`] = `
 Array [
+  <style
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": ".css-1pcnel4-Header{background:rebeccapurple;margin-bottom:1.45rem;}",
+      }
+    }
+    data-emotion-css="1pcnel4-Header"
+  />,
   <header
-    style={
-      Object {
-        "background": "rebeccapurple",
-        "marginBottom": "1.45rem",
-      }
-    }
+    className="css-1pcnel4-Header e1qr1m9j0"
   >
+    <style
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": ".css-pf9rd5-Container{margin:0 auto;max-width:960;padding:1.45rem 1.0875rem;}",
+        }
+      }
+      data-emotion-css="pf9rd5-Container"
+    />
     <div
-      style={
-        Object {
-          "margin": "0 auto",
-          "maxWidth": 960,
-          "padding": "1.45rem 1.0875rem",
-        }
-      }
+      className="css-pf9rd5-Container e1qr1m9j1"
     >
+      <style
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": ".css-1ikcnub-H1{margin:0;}",
+          }
+        }
+        data-emotion-css="1ikcnub-H1"
+      />
       <h1
-        style={
-          Object {
-            "margin": 0,
-          }
-        }
+        className="css-1ikcnub-H1 e1qr1m9j2"
       >
-        <a
-          href="/"
-          style={
+        <style
+          dangerouslySetInnerHTML={
             Object {
-              "color": "white",
-              "textDecoration": "none",
+              "__html": ".css-rkbe0q-StyledLink{color:white;-webkit-text-decoration:none;text-decoration:none;}",
             }
           }
+          data-emotion-css="rkbe0q-StyledLink"
+        />
+        <a
+          className="css-rkbe0q-StyledLink e1qr1m9j3"
+          href="/"
         >
           Gatsby Default Starter
         </a>
       </h1>
     </div>
   </header>,
-  <div
-    style={
+  <style
+    dangerouslySetInnerHTML={
       Object {
-        "margin": "0 auto",
-        "maxWidth": 960,
-        "padding": "0 1.0875rem 1.45rem",
+        "__html": ".css-15zhpu-Container{margin:0 auto;max-width:960;padding:0 1.0875rem 1.45rem;}",
       }
     }
+    data-emotion-css="15zhpu-Container"
+  />,
+  <div
+    className="css-15zhpu-Container e9jw82o0"
   >
     <main>
       <h1>
@@ -59,13 +73,16 @@ Array [
       <p>
         Now go build something great.
       </p>
-      <div
-        style={
+      <style
+        dangerouslySetInnerHTML={
           Object {
-            "marginBottom": "1.45rem",
-            "maxWidth": "300px",
+            "__html": ".css-13x59rf-ImageContainer{max-width:300px;margin-bottom:1.45rem;}",
           }
         }
+        data-emotion-css="13x59rf-ImageContainer"
+      />
+      <div
+        className="css-13x59rf-ImageContainer ewcmato0"
       >
         <div
           className=" gatsby-image-wrapper"

src/pages/__snapshots__/page-2.test.tsx.snap

@@ -2,52 +2,66 @@
 
 exports[`SecondPage renders correctly 1`] = `
 Array [
+  <style
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": ".css-1pcnel4-Header{background:rebeccapurple;margin-bottom:1.45rem;}",
+      }
+    }
+    data-emotion-css="1pcnel4-Header"
+  />,
   <header
-    style={
-      Object {
-        "background": "rebeccapurple",
-        "marginBottom": "1.45rem",
-      }
-    }
+    className="css-1pcnel4-Header e1qr1m9j0"
   >
+    <style
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": ".css-pf9rd5-Container{margin:0 auto;max-width:960;padding:1.45rem 1.0875rem;}",
+        }
+      }
+      data-emotion-css="pf9rd5-Container"
+    />
     <div
-      style={
-        Object {
-          "margin": "0 auto",
-          "maxWidth": 960,
-          "padding": "1.45rem 1.0875rem",
-        }
-      }
+      className="css-pf9rd5-Container e1qr1m9j1"
     >
+      <style
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": ".css-1ikcnub-H1{margin:0;}",
+          }
+        }
+        data-emotion-css="1ikcnub-H1"
+      />
       <h1
-        style={
-          Object {
-            "margin": 0,
-          }
-        }
+        className="css-1ikcnub-H1 e1qr1m9j2"
       >
-        <a
-          href="/"
-          style={
+        <style
+          dangerouslySetInnerHTML={
             Object {
-              "color": "white",
-              "textDecoration": "none",
+              "__html": ".css-rkbe0q-StyledLink{color:white;-webkit-text-decoration:none;text-decoration:none;}",
             }
           }
+          data-emotion-css="rkbe0q-StyledLink"
+        />
+        <a
+          className="css-rkbe0q-StyledLink e1qr1m9j3"
+          href="/"
         >
           Gatsby Default Starter
         </a>
       </h1>
     </div>
   </header>,
-  <div
-    style={
+  <style
+    dangerouslySetInnerHTML={
       Object {
-        "margin": "0 auto",
-        "maxWidth": 960,
-        "padding": "0 1.0875rem 1.45rem",
+        "__html": ".css-15zhpu-Container{margin:0 auto;max-width:960;padding:0 1.0875rem 1.45rem;}",
       }
     }
+    data-emotion-css="15zhpu-Container"
+  />,
+  <div
+    className="css-15zhpu-Container e9jw82o0"
   >
     <main>
       <h1>

src/pages/__snapshots__/using-typescript.test.tsx.snap

@@ -2,52 +2,66 @@
 
 exports[`NotFoundPage renders correctly 1`] = `
 Array [
+  <style
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": ".css-1pcnel4-Header{background:rebeccapurple;margin-bottom:1.45rem;}",
+      }
+    }
+    data-emotion-css="1pcnel4-Header"
+  />,
   <header
-    style={
-      Object {
-        "background": "rebeccapurple",
-        "marginBottom": "1.45rem",
-      }
-    }
+    className="css-1pcnel4-Header e1qr1m9j0"
   >
+    <style
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": ".css-pf9rd5-Container{margin:0 auto;max-width:960;padding:1.45rem 1.0875rem;}",
+        }
+      }
+      data-emotion-css="pf9rd5-Container"
+    />
     <div
-      style={
-        Object {
-          "margin": "0 auto",
-          "maxWidth": 960,
-          "padding": "1.45rem 1.0875rem",
-        }
-      }
+      className="css-pf9rd5-Container e1qr1m9j1"
     >
+      <style
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": ".css-1ikcnub-H1{margin:0;}",
+          }
+        }
+        data-emotion-css="1ikcnub-H1"
+      />
       <h1
-        style={
-          Object {
-            "margin": 0,
-          }
-        }
+        className="css-1ikcnub-H1 e1qr1m9j2"
       >
-        <a
-          href="/"
-          style={
+        <style
+          dangerouslySetInnerHTML={
             Object {
-              "color": "white",
-              "textDecoration": "none",
+              "__html": ".css-rkbe0q-StyledLink{color:white;-webkit-text-decoration:none;text-decoration:none;}",
             }
           }
+          data-emotion-css="rkbe0q-StyledLink"
+        />
+        <a
+          className="css-rkbe0q-StyledLink e1qr1m9j3"
+          href="/"
         >
           Gatsby Default Starter
         </a>
       </h1>
     </div>
   </header>,
-  <div
-    style={
+  <style
+    dangerouslySetInnerHTML={
       Object {
-        "margin": "0 auto",
-        "maxWidth": 960,
-        "padding": "0 1.0875rem 1.45rem",
+        "__html": ".css-15zhpu-Container{margin:0 auto;max-width:960;padding:0 1.0875rem 1.45rem;}",
       }
     }
+    data-emotion-css="15zhpu-Container"
+  />,
+  <div
+    className="css-15zhpu-Container e9jw82o0"
   >
     <main>
       <h1>

src/pages/index.tsx

@@ -4,19 +4,26 @@ import { Link } from "gatsby"
 import Layout from "../components/layout"
 import Image from "../components/image"
 import SEO from "../components/seo"
+import styled from "@emotion/styled"
 
-const IndexPage: React.FC = () => (
+const IndexPage: React.FC = () => {
+  const ImageContainer = styled.div`
+    max-width: 300px;
+    margin-bottom: 1.45rem;
+  `
+  return (
     <Layout>
       <SEO title="Home" />
       <h1>Hi people</h1>
       <p>Welcome to your new Gatsby site.</p>
       <p>Now go build something great.</p>
-    <div style={{ maxWidth: "300px", marginBottom: "1.45rem" }}>
+      <ImageContainer>
         <Image />
-    </div>
+      </ImageContainer>
       <Link to="/page-2/">Go to page 2</Link> <br />
       <Link to="/using-typescript/">Go to &quot;Using TypeScript&quot;</Link>
     </Layout>
   )
+}
 
 export default IndexPage

yarn.lock

@@ -526,7 +526,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.10.1":
+"@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.10.1", "@babel/plugin-syntax-jsx@^7.2.0":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.1.tgz#0ae371134a42b91d5418feb3c8c8d43e1565d2da"
   integrity sha512-+OxyOArpVFXQeXKLO9o+r2I4dIoVoy6+Uu0vKELrlweDM3QJADZj+Z+5ERansZqIZBcLj42vHnDI8Rz9BnRIuQ==
@@ -836,7 +836,7 @@
     "@babel/helper-plugin-utils" "^7.10.1"
     "@babel/plugin-syntax-jsx" "^7.10.1"
 
-"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.10.1", "@babel/plugin-transform-react-jsx@^7.9.1":
+"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.10.1", "@babel/plugin-transform-react-jsx@^7.3.0", "@babel/plugin-transform-react-jsx@^7.9.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.1.tgz#91f544248ba131486decb5d9806da6a6e19a2896"
   integrity sha512-MBVworWiSRBap3Vs39eHt+6pJuLUAaK4oxGc8g+wY+vuSJvLiEQjW1LSTqKb8OUPtDvHCkdPhk7d6sjC19xyFw==
@@ -1226,6 +1226,23 @@
     exec-sh "^0.3.2"
     minimist "^1.2.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==
+  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"
+
 "@emotion/cache@^10.0.27":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
@@ -4350,7 +4367,7 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-emotion@^10.0.20, babel-plugin-emotion@^10.0.27:
+babel-plugin-emotion@^10.0.20, babel-plugin-emotion@^10.0.27, babel-plugin-emotion@^10.0.33:
   version "10.0.33"
   resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03"
   integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==
@@ -8862,6 +8879,14 @@ gatsby-page-utils@^0.2.8:
     lodash "^4.17.15"
     micromatch "^3.1.10"
 
+gatsby-plugin-emotion@^4.3.3:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-emotion/-/gatsby-plugin-emotion-4.3.3.tgz#61f20d63ddca46b7349ef1405cd13dbe49640043"
+  integrity sha512-bh06fzkvMPmqXNSfDo8SdxKd0ZnqRImllgf1wwx/ZzePRkvvbQT5CwtJry4LWU8RiOFlDbS8Wl1ERIAes1CANQ==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    "@emotion/babel-preset-css-prop" "^10.0.27"
+
 gatsby-plugin-eslint@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-eslint/-/gatsby-plugin-eslint-2.0.8.tgz#1ff7f546a427d274dc2de3932ba29822aae330c3"