diff --git a/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md b/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md
index 7cf814aa3749c..c99a44400a9cb 100644
--- a/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md
+++ b/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md
@@ -397,27 +397,29 @@ Let's remedy that. Import the `Link` component and swap it for the simple
 `<a>` tag that was in there before:
 
 ```jsx
-import React from 'react';
-import { Link } from 'gatsby';
+import React from "react"
+import { Link } from "gatsby"
 
 export default class BlogIndex extends React.Component {
   render() {
     // Handle graphql errors
     if (this.props.errors && this.props.errors.length) {
       this.props.errors.forEach(({ message }) => {
-        console.error(`BlogIndex render errr: ${message}`);
-      });
-      return <h1>Errors found: Check the console for details</h1>;
+        console.error(`BlogIndex render errr: ${message}`)
+      })
+      return <h1>Errors found: Check the console for details</h1>
     }
 
     return (
       <div>
         <h2>Some things I wrote</h2>
         {this.props.data.allMarkdownRemark.edges.map(({ node }, i) => (
-          <Link to={/* ??? */} key={i}>{node.frontmatter.title}</Link>
+          <Link to={/* ??? */} key={i}>
+            {node.frontmatter.title}
+          </Link>
         ))}
       </div>
-    );
+    )
   }
 }
 ```
diff --git a/docs/blog/2018-11-07-gatsby-for-apps/index.md b/docs/blog/2018-11-07-gatsby-for-apps/index.md
index dec3b9554e79e..71829e6518130 100644
--- a/docs/blog/2018-11-07-gatsby-for-apps/index.md
+++ b/docs/blog/2018-11-07-gatsby-for-apps/index.md
@@ -97,9 +97,9 @@ class Messages extends React.Component {
 
   // note: this is a simplified example without error handling, authentication, etc.
   async componentDidMount() {
-    const messages = await fetch(`/api/some-url-to-get-messages`).then(
-      response => response.json()
-    )
+    const messages = await fetch(
+      `/api/some-url-to-get-messages`
+    ).then(response => response.json())
 
     this.setState({
       messages,
diff --git a/docs/blog/2019-07-30-how-i-used-theme-ui-to-build-my-gatsby-themes-library/index.md b/docs/blog/2019-07-30-how-i-used-theme-ui-to-build-my-gatsby-themes-library/index.md
index 9784e6f45ac21..69f0f81109cf1 100644
--- a/docs/blog/2019-07-30-how-i-used-theme-ui-to-build-my-gatsby-themes-library/index.md
+++ b/docs/blog/2019-07-30-how-i-used-theme-ui-to-build-my-gatsby-themes-library/index.md
@@ -97,24 +97,25 @@ I highly recommend using the breakpoint syntax and reading the [documentation](h
 So far, so normal you'd say. But I had a cool idea to solve my problem of positioning shapes around my theme entries which I collect in a `.yaml` file (see the [source file](https://github.com/LekoArts/gatsby-themes/blob/master/www/data/themes.yaml)). Just define the shapes in the respective theme entry! YAML is a great format for that as it makes it possible (together with the Gatsby transformer) to create arrays and array of objects. The shapes entry looks like this:
 
 ```yaml
-shapes: [
-  {
-    type: "circle",
-    color: "green",
-    size: ["200px", "300px"],
-    xOffset: ["-140px", "-120px"],
-    yOffset: ["-70px"],
-    opacity: 0.5,
-  },
-  {
-    type: "donut",
-    color: "teal",
-    size: ["25px", "100px"],
-    xOffset: ["50px"],
-    yOffset: ["-60px"],
-    opacity: 1,
-  },
-]
+shapes:
+  [
+    {
+      type: "circle",
+      color: "green",
+      size: ["200px", "300px"],
+      xOffset: ["-140px", "-120px"],
+      yOffset: ["-70px"],
+      opacity: 0.5,
+    },
+    {
+      type: "donut",
+      color: "teal",
+      size: ["25px", "100px"],
+      xOffset: ["50px"],
+      yOffset: ["-60px"],
+      opacity: 1,
+    },
+  ]
 ```
 
 These are all the information that my shape components need to render the desired output. I didn't use _left_ and _right_ here as the shapes should always face the outside (on the inside it could overlap the text). As you can see the array / breakpoint notation for position and size was used — I think that's just cool 😎
diff --git a/docs/docs/add-seo-component.md b/docs/docs/add-seo-component.md
index 51e949707cf8f..8d471a2b20bd5 100644
--- a/docs/docs/add-seo-component.md
+++ b/docs/docs/add-seo-component.md
@@ -63,10 +63,7 @@ Now define the query and place it in the StaticQuery (you can also save the quer
 
 ```jsx:title=src/components/SEO.js
 const SEO = ({ title, description, image, pathname, article }) => (
-  <StaticQuery
-    query={query}
-    render={}
-  />
+  <StaticQuery query={query} render={} />
 )
 
 export default SEO
@@ -84,7 +81,7 @@ const query = graphql`
       }
     }
   }
-`;
+`
 ```
 
 The next step is to destructure the data from the query and to create an object that checks if the props were used — if not the default values are utilized. The name aliasing comes in handy here: It avoids name collisions.
diff --git a/docs/docs/mdx/writing-pages.md b/docs/docs/mdx/writing-pages.md
index d6e93c1094c8b..5576383f6351d 100644
--- a/docs/docs/mdx/writing-pages.md
+++ b/docs/docs/mdx/writing-pages.md
@@ -60,7 +60,6 @@ author: Jay Gatsby
 ---
 
 <h1>{props.pageContext.frontmatter.title}</h1>
-
 <span>{props.pageContext.frontmatter.author}</span>
 
 (Blog post content, components, etc.)
@@ -80,7 +79,6 @@ import FAQ from "../components/faq.mdx"
 The chart is rendered inside our MDX document.
 
 <Chart />
-
 <FAQ />
 ```
 
diff --git a/e2e-tests/production-runtime/cypress/integration/accessibility.js b/e2e-tests/production-runtime/cypress/integration/accessibility.js
index 17dd765b34c2b..fa628a7324379 100644
--- a/e2e-tests/production-runtime/cypress/integration/accessibility.js
+++ b/e2e-tests/production-runtime/cypress/integration/accessibility.js
@@ -27,10 +27,9 @@ describe(`focus management`, () => {
   })
 
   it(`Focus router wrapper after navigation from 404`, () => {
-    cy.visit(`/broken-path`, { failOnStatusCode: false }).waitForAPIorTimeout(
-      `onRouteUpdate`,
-      { timeout: 5000 }
-    )
+    cy.visit(`/broken-path`, {
+      failOnStatusCode: false,
+    }).waitForAPIorTimeout(`onRouteUpdate`, { timeout: 5000 })
 
     cy.changeFocus()
     cy.assertRouterWrapperFocus(false)
@@ -39,10 +38,9 @@ describe(`focus management`, () => {
   })
 
   it(`Focus router wrapper after navigation from one 404 path to another 404 path`, () => {
-    cy.visit(`/broken-path`, { failOnStatusCode: false }).waitForAPIorTimeout(
-      `onRouteUpdate`,
-      { timeout: 5000 }
-    )
+    cy.visit(`/broken-path`, {
+      failOnStatusCode: false,
+    }).waitForAPIorTimeout(`onRouteUpdate`, { timeout: 5000 })
 
     // navigating to different not existing page should also trigger
     // router wrapper focus as this is different page
diff --git a/examples/using-redux/src/components/layout.js b/examples/using-redux/src/components/layout.js
index a64f00c829409..6bc5a56c75a04 100644
--- a/examples/using-redux/src/components/layout.js
+++ b/examples/using-redux/src/components/layout.js
@@ -23,10 +23,7 @@ const mapDispatchToProps = dispatch => {
   return { increment: () => dispatch({ type: `INCREMENT` }) }
 }
 
-const ConnectedCounter = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Counter)
+const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter)
 
 class DefaultLayout extends React.Component {
   render() {
diff --git a/integration-tests/long-term-caching/__tests__/long-term-caching.js b/integration-tests/long-term-caching/__tests__/long-term-caching.js
index 8168239b0108e..9dd15adc89d14 100644
--- a/integration-tests/long-term-caching/__tests__/long-term-caching.js
+++ b/integration-tests/long-term-caching/__tests__/long-term-caching.js
@@ -15,17 +15,19 @@ const getDirFilesWalk = async dir => {
   const dirFiles = await readdir(dir)
 
   const additionalFiles = [].concat(
-    ...(await Promise.all(
-      dirFiles.map(async file => {
-        const filePath = `${dir}/${file}`
-        const fileStat = await stat(filePath)
-
-        if (fileStat.isDirectory()) {
-          return await getDirFilesWalk(filePath)
-        }
-        return undefined
-      })
-    )).filter(Boolean)
+    ...(
+      await Promise.all(
+        dirFiles.map(async file => {
+          const filePath = `${dir}/${file}`
+          const fileStat = await stat(filePath)
+
+          if (fileStat.isDirectory()) {
+            return await getDirFilesWalk(filePath)
+          }
+          return undefined
+        })
+      )
+    ).filter(Boolean)
   )
 
   return [...dirFiles, ...additionalFiles]
diff --git a/packages/gatsby-cli/src/init-starter.js b/packages/gatsby-cli/src/init-starter.js
index a2f4ea5ec51de..3232958490817 100644
--- a/packages/gatsby-cli/src/init-starter.js
+++ b/packages/gatsby-cli/src/init-starter.js
@@ -166,9 +166,13 @@ const clone = async (hostInfo: any, rootPath: string) => {
 
   report.info(`Creating new site from git: ${url}`)
 
-  const args = [`clone`, ...branch, url, rootPath, `--single-branch`].filter(
-    arg => Boolean(arg)
-  )
+  const args = [
+    `clone`,
+    ...branch,
+    url,
+    rootPath,
+    `--single-branch`,
+  ].filter(arg => Boolean(arg))
 
   await spawnWithArgs(`git`, args)
 
diff --git a/packages/gatsby-source-npm-package-search/src/gatsby-node.js b/packages/gatsby-source-npm-package-search/src/gatsby-node.js
index f8a21ccf8f96c..0c26561f096d5 100644
--- a/packages/gatsby-source-npm-package-search/src/gatsby-node.js
+++ b/packages/gatsby-source-npm-package-search/src/gatsby-node.js
@@ -36,9 +36,11 @@ exports.sourceNodes = async (
 
       if (!hit.readme) {
         try {
-          hit.readme = (await got.get(
-            url.resolve(`https://unpkg.com/`, `/${hit.objectID}/README.md`)
-          )).body
+          hit.readme = (
+            await got.get(
+              url.resolve(`https://unpkg.com/`, `/${hit.objectID}/README.md`)
+            )
+          ).body
         } catch (err) {
           // carry-on
         }
diff --git a/packages/gatsby-source-shopify/src/gatsby-node.js b/packages/gatsby-source-shopify/src/gatsby-node.js
index 561cc21ac96e2..2d5a928263ce3 100644
--- a/packages/gatsby-source-shopify/src/gatsby-node.js
+++ b/packages/gatsby-source-shopify/src/gatsby-node.js
@@ -175,10 +175,7 @@ const createShopPolicies = async ({
   Object.entries(policies)
     .filter(([_, policy]) => Boolean(policy))
     .forEach(
-      pipe(
-        ([type, policy]) => ShopPolicyNode(policy, { type }),
-        createNode
-      )
+      pipe(([type, policy]) => ShopPolicyNode(policy, { type }), createNode)
     )
   if (verbose) console.timeEnd(msg)
 }
diff --git a/packages/gatsby-source-wordpress/src/__tests__/normalize.js b/packages/gatsby-source-wordpress/src/__tests__/normalize.js
index 1ed444d1e75d2..b2cc74dcebf99 100644
--- a/packages/gatsby-source-wordpress/src/__tests__/normalize.js
+++ b/packages/gatsby-source-wordpress/src/__tests__/normalize.js
@@ -56,7 +56,10 @@ describe(`Process WordPress data`, () => {
   })
 
   it(`Removes the acf key when acf is not an object`, () => {
-    let dummyEntities = [{ id: 1, acf: false }, { id: 2, acf: {} }]
+    let dummyEntities = [
+      { id: 1, acf: false },
+      { id: 2, acf: {} },
+    ]
     expect(normalize.normalizeACF(dummyEntities)).toEqual([
       { id: 1 },
       { id: 2, acf: {} },
diff --git a/packages/gatsby-source-wordpress/src/normalize.js b/packages/gatsby-source-wordpress/src/normalize.js
index b72e23386d302..f3b5ad778f19e 100644
--- a/packages/gatsby-source-wordpress/src/normalize.js
+++ b/packages/gatsby-source-wordpress/src/normalize.js
@@ -60,14 +60,18 @@ exports.normalizeACF = normalizeACF
 exports.combineACF = function(entities) {
   let acfOptionData = {}
   // Map each ACF Options object keys/data to single object
-  _.forEach(entities.filter(e => e.__type === `wordpress__acf_options`), e => {
-    if (e[`acf`]) {
-      acfOptionData[e.__acfOptionPageId || `options`] = {}
-      Object.keys(e[`acf`]).map(
-        k => (acfOptionData[e.__acfOptionPageId || `options`][k] = e[`acf`][k])
-      )
+  _.forEach(
+    entities.filter(e => e.__type === `wordpress__acf_options`),
+    e => {
+      if (e[`acf`]) {
+        acfOptionData[e.__acfOptionPageId || `options`] = {}
+        Object.keys(e[`acf`]).map(
+          k =>
+            (acfOptionData[e.__acfOptionPageId || `options`][k] = e[`acf`][k])
+        )
+      }
     }
-  })
+  )
 
   // Remove previous ACF Options objects (if any)
   _.pullAll(
diff --git a/packages/gatsby-transformer-csv/src/__tests__/gatsby-node.js b/packages/gatsby-transformer-csv/src/__tests__/gatsby-node.js
index b620411a5c0c9..22132168fc8d3 100644
--- a/packages/gatsby-transformer-csv/src/__tests__/gatsby-node.js
+++ b/packages/gatsby-transformer-csv/src/__tests__/gatsby-node.js
@@ -23,7 +23,10 @@ describe(`Process nodes correctly`, () => {
 
   it(`correctly creates nodes from JSON which is an array of objects`, async () => {
     const fields = [`blue`, `funny`]
-    const data = [{ blue: true, funny: `yup` }, { blue: false, funny: `nope` }]
+    const data = [
+      { blue: true, funny: `yup` },
+      { blue: false, funny: `nope` },
+    ]
     const csv = json2csv({ data: data, fields: fields })
     node.content = csv
 
diff --git a/packages/gatsby-transformer-excel/src/__tests__/gatsby-node.js b/packages/gatsby-transformer-excel/src/__tests__/gatsby-node.js
index 2f8b4c33478e8..c3eb47c9f3ee4 100644
--- a/packages/gatsby-transformer-excel/src/__tests__/gatsby-node.js
+++ b/packages/gatsby-transformer-excel/src/__tests__/gatsby-node.js
@@ -20,7 +20,11 @@ describe(`Process nodes correctly`, () => {
   const loadNodeContent = node => Promise.resolve(node.content)
 
   it(`correctly creates nodes from JSON which is an array of objects`, async () => {
-    const data = [[`blue`, `funny`], [true, `yup`], [false, `nope`]]
+    const data = [
+      [`blue`, `funny`],
+      [true, `yup`],
+      [false, `nope`],
+    ]
     const csv = XLSX.utils.sheet_to_csv(XLSX.utils.aoa_to_sheet(data))
     node.content = csv
 
@@ -47,7 +51,11 @@ describe(`Process nodes correctly`, () => {
   })
 
   it(`should correctly create nodes from JSON with raw option false`, async () => {
-    const data = [[`red`, `veryfunny`], [true, `certainly`], [false, `nada`]]
+    const data = [
+      [`red`, `veryfunny`],
+      [true, `certainly`],
+      [false, `nada`],
+    ]
     const csv = XLSX.utils.sheet_to_csv(XLSX.utils.aoa_to_sheet(data))
     node.content = csv
 
@@ -77,7 +85,11 @@ describe(`Process nodes correctly`, () => {
   })
 
   it(`should correctly create nodes from JSON with legacy rawOutput option false`, async () => {
-    const data = [[`red`, `veryfunny`], [true, `certainly`], [false, `nada`]]
+    const data = [
+      [`red`, `veryfunny`],
+      [true, `certainly`],
+      [false, `nada`],
+    ]
     const csv = XLSX.utils.sheet_to_csv(XLSX.utils.aoa_to_sheet(data))
     node.content = csv
 
diff --git a/packages/gatsby-transformer-json/README.md b/packages/gatsby-transformer-json/README.md
index 6a4410afc6d87..45aaa565df51d 100644
--- a/packages/gatsby-transformer-json/README.md
+++ b/packages/gatsby-transformer-json/README.md
@@ -235,7 +235,10 @@ It's probably because you have arrays of mixed values somewhere. For instance:
 ```json
 {
   "stuff": [25, "bob"],
-  "orEven": [[25, "bob"], [23, "joe"]]
+  "orEven": [
+    [25, "bob"],
+    [23, "joe"]
+  ]
 }
 ```
 
@@ -244,6 +247,9 @@ If you can rewrite your data with objects, you should be good to go:
 ```json
 {
   "stuff": [{ "count": 25, "name": "bob" }],
-  "orEven": [{ "count": 25, "name": "bob" }, { "count": 23, "name": "joe" }]
+  "orEven": [
+    { "count": 25, "name": "bob" },
+    { "count": 23, "name": "joe" }
+  ]
 }
 ```
diff --git a/packages/gatsby-transformer-remark/src/__tests__/extend-node.js b/packages/gatsby-transformer-remark/src/__tests__/extend-node.js
index f004b2bcb0320..2c54465a9a443 100644
--- a/packages/gatsby-transformer-remark/src/__tests__/extend-node.js
+++ b/packages/gatsby-transformer-remark/src/__tests__/extend-node.js
@@ -1104,9 +1104,9 @@ console.log('hello world')
     `htmlAst`,
     node => {
       expect(node).toMatchSnapshot()
-      expect(node.htmlAst.children[0].children[0].properties.className).toEqual(
-        [`language-js`]
-      )
+      expect(
+        node.htmlAst.children[0].children[0].properties.className
+      ).toEqual([`language-js`])
       expect(node.htmlAst.children[0].children[0].properties.dataMeta).toEqual(
         `foo bar`
       )
diff --git a/packages/gatsby/src/internal-plugins/webpack-theme-component-shadowing/index.js b/packages/gatsby/src/internal-plugins/webpack-theme-component-shadowing/index.js
index c6fd44df63deb..78340cb0a506c 100644
--- a/packages/gatsby/src/internal-plugins/webpack-theme-component-shadowing/index.js
+++ b/packages/gatsby/src/internal-plugins/webpack-theme-component-shadowing/index.js
@@ -12,7 +12,10 @@ module.exports = class GatsbyThemeComponentShadowingResolverPlugin {
   cache = {}
 
   constructor({ projectRoot, themes, extensions }) {
-    debug(`themes list`, themes.map(({ themeName }) => themeName))
+    debug(
+      `themes list`,
+      themes.map(({ themeName }) => themeName)
+    )
     this.themes = themes
     this.projectRoot = projectRoot
     this.extensions = extensions
diff --git a/packages/gatsby/src/redux/actions/public.js b/packages/gatsby/src/redux/actions/public.js
index be073af8d57f5..4d90c97d250aa 100644
--- a/packages/gatsby/src/redux/actions/public.js
+++ b/packages/gatsby/src/redux/actions/public.js
@@ -90,10 +90,7 @@ actions.deletePage = (page: PageInput) => {
   }
 }
 
-const pascalCase = _.flow(
-  _.camelCase,
-  _.upperFirst
-)
+const pascalCase = _.flow(_.camelCase, _.upperFirst)
 const hasWarnedForPageComponentInvalidContext = new Set()
 const hasWarnedForPageComponentInvalidCasing = new Set()
 const hasErroredBecauseOfNodeValidation = new Set()
@@ -362,8 +359,8 @@ ${reservedFields.map(f => `  * "${f}"`).join(`\n`)}
   // Only run validation once during builds.
   if (
     !internalPage.component.includes(`/.cache/`) &&
-    (process.env.NODE_ENV === `production` &&
-      !fileOkCache[internalPage.component])
+    process.env.NODE_ENV === `production` &&
+    !fileOkCache[internalPage.component]
   ) {
     const fileName = internalPage.component
     const fileContent = fs.readFileSync(fileName, `utf-8`)
diff --git a/packages/gatsby/src/schema/extensions/__tests__/field-extensions.js b/packages/gatsby/src/schema/extensions/__tests__/field-extensions.js
index 714356364c113..95beca5fd2589 100644
--- a/packages/gatsby/src/schema/extensions/__tests__/field-extensions.js
+++ b/packages/gatsby/src/schema/extensions/__tests__/field-extensions.js
@@ -1311,7 +1311,10 @@ describe(`GraphQL field extensions`, () => {
       const expected = {
         nestedTest: {
           fromNextLevel: 26,
-          fromBottomLevel: [[`lorem`, `ipsum`], [`dolor`, `sit`]],
+          fromBottomLevel: [
+            [`lorem`, `ipsum`],
+            [`dolor`, `sit`],
+          ],
         },
       }
       expect(results).toEqual(expected)
diff --git a/packages/gatsby/src/schema/infer/__tests__/example-value.js b/packages/gatsby/src/schema/infer/__tests__/example-value.js
index ac16a8af20695..51c00fa2f24ce 100644
--- a/packages/gatsby/src/schema/infer/__tests__/example-value.js
+++ b/packages/gatsby/src/schema/infer/__tests__/example-value.js
@@ -20,7 +20,10 @@ describe(`Get example value for type inference`, () => {
       "key-with..unsupported-values": true,
       emptyArray: [],
       anArray: [1, 2, 3, 4],
-      nestedArrays: [[1, 2, 3], [4, 5, 6]],
+      nestedArrays: [
+        [1, 2, 3],
+        [4, 5, 6],
+      ],
       objectsInArray: [{ field1: true }, { field2: 1 }],
       frontmatter: {
         date: `2006-07-22T22:39:53.000Z`,
diff --git a/packages/gatsby/src/schema/infer/__tests__/infer.js b/packages/gatsby/src/schema/infer/__tests__/infer.js
index 853ed9d819968..8eca8a8bd84a4 100644
--- a/packages/gatsby/src/schema/infer/__tests__/infer.js
+++ b/packages/gatsby/src/schema/infer/__tests__/infer.js
@@ -49,7 +49,10 @@ const makeNodes = () => [
     hair: 1,
     date: `1012-11-01`,
     anArray: [1, 2, 3, 4],
-    aNestedArray: [[1, 2, 3, 4], [5, 6, 7, 8]],
+    aNestedArray: [
+      [1, 2, 3, 4],
+      [5, 6, 7, 8],
+    ],
     anObjectArray: [
       { aString: `some string`, aNumber: 2, aBoolean: true },
       { aString: `some string`, aNumber: 2, anArray: [1, 2] },
diff --git a/scripts/add-packages-to-team/index.js b/scripts/add-packages-to-team/index.js
index ed4dce92f9104..5b3f27da90918 100644
--- a/scripts/add-packages-to-team/index.js
+++ b/scripts/add-packages-to-team/index.js
@@ -44,5 +44,11 @@ getUnownedPackages({ user }).then(async ({ packages }) => {
   // packages.forEach(package => {
   //   fetch("https://www.npmjs.com/settings/gatsbyjs/teams/team/ink-team/access", <this need to be custom to your session & use the package here>);
   // })
-  console.log(JSON.stringify(packages.map(pkg => pkg.name), null, 2))
+  console.log(
+    JSON.stringify(
+      packages.map(pkg => pkg.name),
+      null,
+      2
+    )
+  )
 })
diff --git a/www/src/components/banner.js b/www/src/components/banner.js
index dfe653245b65d..ff6aba8e0b388 100644
--- a/www/src/components/banner.js
+++ b/www/src/components/banner.js
@@ -9,9 +9,7 @@ const InnerContainer = styled(`div`)`
   height: ${p => p.theme.sizes.bannerHeight};
   overflow-x: auto;
   mask-image: ${props =>
-    `linear-gradient(to right, transparent, ${props.theme.colors.purple[90]} ${
-      props.theme.space[6]
-    }, ${props.theme.colors.purple[90]} 96%, transparent)`};
+    `linear-gradient(to right, transparent, ${props.theme.colors.purple[90]} ${props.theme.space[6]}, ${props.theme.colors.purple[90]} 96%, transparent)`};
 `
 
 const Content = styled(`div`)`
diff --git a/www/src/components/diagram.js b/www/src/components/diagram.js
index ca6db37e37049..e872ac4c9cd8d 100644
--- a/www/src/components/diagram.js
+++ b/www/src/components/diagram.js
@@ -268,13 +268,7 @@ const Diagram = () => (
               backgroundColor: `purple.70`,
               backgroundSize: t => `${t.sizes[10]} ${t.sizes[10]}`,
               backgroundImage: t =>
-                `linear-gradient(45deg, ${
-                  t.colors.purple[80]
-                } 25%, transparent 25%, transparent 50%, ${
-                  t.colors.purple[80]
-                } 50%, ${
-                  t.colors.purple[80]
-                } 75%, transparent 75%, transparent)`,
+                `linear-gradient(45deg, ${t.colors.purple[80]} 25%, transparent 25%, transparent 50%, ${t.colors.purple[80]} 50%, ${t.colors.purple[80]} 75%, transparent 75%, transparent)`,
               py: 0,
             }}
           >
diff --git a/www/src/components/features/evaluation-cell.js b/www/src/components/features/evaluation-cell.js
index 8d4e8a3479c72..892e9211b75c1 100644
--- a/www/src/components/features/evaluation-cell.js
+++ b/www/src/components/features/evaluation-cell.js
@@ -63,11 +63,7 @@ const getBackground = num => {
     }
     case `1`: {
       return t =>
-        `linear-gradient(180deg, transparent 50%, ${
-          t.colors.orange[20]
-        } 50%), linear-gradient(90deg, transparent 50%, ${
-          t.colors.orange[20]
-        } 50%)`
+        `linear-gradient(180deg, transparent 50%, ${t.colors.orange[20]} 50%), linear-gradient(90deg, transparent 50%, ${t.colors.orange[20]} 50%)`
     }
     case `3`:
     case `0`:
diff --git a/www/src/components/guidelines/badge.js b/www/src/components/guidelines/badge.js
index d816247dc1317..da6745de93309 100644
--- a/www/src/components/guidelines/badge.js
+++ b/www/src/components/guidelines/badge.js
@@ -5,10 +5,7 @@ import propTypes from "@styled-system/prop-types"
 
 import { Flex } from "./system"
 
-const styleProps = compose(
-  border,
-  typography
-)
+const styleProps = compose(border, typography)
 
 const BadgeBase = styled(Flex)(
   {
diff --git a/www/src/components/guidelines/system/button.js b/www/src/components/guidelines/system/button.js
index 00c5363c4884e..c7d2387317256 100644
--- a/www/src/components/guidelines/system/button.js
+++ b/www/src/components/guidelines/system/button.js
@@ -7,10 +7,7 @@ import Box from "./box"
 
 const buttonPropTypes = { ...propTypes.border, ...propTypes.typography }
 
-const styleProps = compose(
-  border,
-  typography
-)
+const styleProps = compose(border, typography)
 
 const Button = styled(Box)(
   props => {
diff --git a/www/src/components/navigation.js b/www/src/components/navigation.js
index 7052d4f36d238..c224558db14d9 100644
--- a/www/src/components/navigation.js
+++ b/www/src/components/navigation.js
@@ -188,9 +188,7 @@ const Navigation = ({ pathname }) => {
                 listStyle: `none`,
                 m: 0,
                 maskImage: t =>
-                  `linear-gradient(to right, transparent, white ${
-                    t.space[1]
-                  }, white 98%, transparent)`,
+                  `linear-gradient(to right, transparent, white ${t.space[1]}, white 98%, transparent)`,
                 overflowX: `auto`,
               },
             }}
diff --git a/www/src/components/search-form.js b/www/src/components/search-form.js
index 7a7de72394573..d92c650a0b3be 100644
--- a/www/src/components/search-form.js
+++ b/www/src/components/search-form.js
@@ -105,9 +105,7 @@ const algoliaStyles = t => css`
   }
 
   .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
-    background-color: ${
-      t.colors.search.suggestionHighlightBackground
-    } !important;
+    background-color: ${t.colors.search.suggestionHighlightBackground} !important;
     box-shadow: 0 !important;
     color: ${t.colors.search.suggestionHighlightColor} !important;
   }
diff --git a/www/src/templates/template-docs-markdown.js b/www/src/templates/template-docs-markdown.js
index 2e94f2bdde77a..45d39b2e4838f 100644
--- a/www/src/templates/template-docs-markdown.js
+++ b/www/src/templates/template-docs-markdown.js
@@ -27,9 +27,7 @@ const containerStyles = {
   //
   // could be much cleaner/clearer, please feel free to improve 🙏
   maxWidth: t =>
-    `calc(${t.sizes.mainContentWidth.withSidebar} + ${t.sizes.tocWidth} + ${
-      t.space[9]
-    } + ${t.space[9]} + ${t.space[9]})`,
+    `calc(${t.sizes.mainContentWidth.withSidebar} + ${t.sizes.tocWidth} + ${t.space[9]} + ${t.space[9]} + ${t.space[9]})`,
   px: 9,
 }
 
@@ -107,13 +105,9 @@ function DocsTemplate({ data, location, pageContext: { next, prev } }) {
                     maxWidth: `tocWidth`,
                     position: `sticky`,
                     top: t =>
-                      `calc(${t.sizes.headerHeight} + ${
-                        t.sizes.bannerHeight
-                      } + ${t.space[9]})`,
+                      `calc(${t.sizes.headerHeight} + ${t.sizes.bannerHeight} + ${t.space[9]})`,
                     maxHeight: t =>
-                      `calc(100vh - ${t.sizes.headerHeight} - ${
-                        t.sizes.bannerHeight
-                      } - ${t.space[9]} - ${t.space[9]})`,
+                      `calc(100vh - ${t.sizes.headerHeight} - ${t.sizes.bannerHeight} - ${t.space[9]} - ${t.space[9]})`,
                     overflow: `auto`,
                   },
                 }}