Merge branch 'master' into feat/image-helpers

.circleci/config.yml

@@ -117,6 +117,23 @@ aliases:
       - notify-status:
           condition: << parameters.nightly >>
 
+  e2e_tests_development_runtime_lazy_alias:
+    &e2e_tests_development_runtime_lazy_alias
+    <<: *e2e-executor
+    parameters:
+      nightly:
+        type: boolean
+        default: false
+    environment:
+      CYPRESS_PROJECT_ID: ihj5mz
+      CYPRESS_RECORD_KEY: 01acdce8-75bd-4280-9839-6cb215b2c84b
+    steps:
+      - e2e-test:
+          test_path: e2e-tests/lazy-development-runtime
+          skip_file_change_test: << parameters.nightly >>
+      - notify-status:
+          condition: << parameters.nightly >>
+
   e2e_tests_gatsby-image_alias: &e2e_tests_gatsby-image_alias
     <<: *e2e-executor
     parameters:
@@ -271,6 +288,12 @@ jobs:
       - e2e-test:
           test_path: integration-tests/artifacts
 
+  integration_tests_ssr:
+    executor: node
+    steps:
+      - e2e-test:
+          test_path: integration-tests/ssr
+
   e2e_tests_path-prefix:
     <<: *e2e-executor
     environment:
@@ -326,6 +349,13 @@ jobs:
   e2e_tests_development_runtime:
     <<: *e2e_tests_development_runtime_alias
 
+  e2e_tests_development_runtime_lazy_devjs:
+    <<: *e2e_tests_development_runtime_alias
+    environment:
+      GATSBY_EXPERIMENT_LAZY_DEVJS: true
+      CYPRESS_PROJECT_ID: ihj5mz
+      CYPRESS_RECORD_KEY: 01acdce8-75bd-4280-9839-6cb215b2c84b
+
   e2e_tests_development_runtime_with_experimental_react:
     <<: *e2e_tests_development_runtime_alias
 
@@ -363,20 +393,29 @@ jobs:
 
   mdx_e2e_tests:
     <<: *e2e-executor
+    environment:
+      CYPRESS_PROJECT_ID: spbj28
+      CYPRESS_RECORD_KEY: af30ea46-121f-4fb7-97dd-f17ec224402e
     steps:
       - e2e-test:
           test_path: e2e-tests/mdx
           test_command: yarn test
 
   e2e_tests_gatsby-static-image:
     <<: *e2e-executor
+    environment:
+      CYPRESS_PROJECT_ID: zstawi
+      CYPRESS_RECORD_KEY: 389326a6-c0d2-4215-bc5e-3be29483ed13
     steps:
       - e2e-test:
           test_path: e2e-tests/gatsby-static-image
           test_command: yarn test
 
   e2e_tests_visual-regression:
     <<: *e2e-executor
+    environment:
+      CYPRESS_PROJECT_ID: nz99aw
+      CYPRESS_RECORD_KEY: ed4b1af1-bd97-47d4-bb09-3cab2435a147
     steps:
       - e2e-test:
           test_path: e2e-tests/visual-regression
@@ -582,6 +621,8 @@ workflows:
           <<: *e2e-test-workflow
       - integration_tests_artifacts:
           <<: *e2e-test-workflow
+      - integration_tests_ssr:
+          <<: *e2e-test-workflow
       - integration_tests_gatsby_cli:
           requires:
             - bootstrap
@@ -597,6 +638,8 @@ workflows:
           <<: *e2e-test-workflow
       - e2e_tests_development_runtime:
           <<: *e2e-test-workflow
+      - e2e_tests_development_runtime_lazy_devjs:
+          <<: *e2e-test-workflow
       - e2e_tests_production_runtime:
           <<: *e2e-test-workflow
       - themes_e2e_tests_production_runtime:

benchmarks/gabe-fs-mdx/gatsby-config.js

@@ -13,7 +13,7 @@ module.exports = {
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
-        // lessBabel: true,
+        lessBabel: true,
       },
     },
   ],

benchmarks/source-contentful/gatsby-config.js

@@ -27,6 +27,7 @@ module.exports = {
     {
       resolve: "gatsby-source-contentful",
       options: contentfulConfig,
+      pageLimit: 1000,
     },
   ],
 }

docs/docs/emotion.md

@@ -17,7 +17,7 @@ gatsby new emotion-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-wor
 Second, install the necessary dependencies for Emotion and Gatsby.
 
 ```shell
-npm install gatsby-plugin-emotion @emotion/core @emotion/styled
+npm install gatsby-plugin-emotion @emotion/react @emotion/styled
 ```
 
 And then add the plugin to your site's `gatsby-config.js`:
@@ -35,7 +35,7 @@ Now create a sample Emotion page at `src/pages/index.js`:
 ```jsx:title=src/pages/index.js
 import React from "react"
 import styled from "@emotion/styled"
-import { css } from "@emotion/core"
+import { css } from "@emotion/react"
 
 const Container = styled.div`
   margin: 3rem auto;
@@ -123,7 +123,7 @@ To start, create a new Gatsby site with the [hello world starter](https://github
 ```shell
 gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world
 cd global-styles
-npm install gatsby-plugin-emotion @emotion/core @emotion/styled
+npm install gatsby-plugin-emotion @emotion/react @emotion/styled
 ```
 
 Create `gatsby-config.js` and add the Emotion plugin:
@@ -138,7 +138,7 @@ Next, add a layout component at `src/components/layout.js`:
 
 ```jsx:title=src/components/layout.js
 import React from "react"
-import { Global, css } from "@emotion/core"
+import { Global, css } from "@emotion/react"
 import styled from "@emotion/styled"
 
 const Wrapper = styled("div")`

docs/docs/recipes/styling-css.md

@@ -323,7 +323,7 @@ If fonts are not updating following steps above, make sure to replace the existi
 1. Install the [Gatsby Emotion plugin](/packages/gatsby-plugin-emotion/) and Emotion packages.
 
 ```shell
-npm install gatsby-plugin-emotion @emotion/core @emotion/styled
+npm install gatsby-plugin-emotion @emotion/react @emotion/styled
 ```
 
 2. Add the `gatsby-plugin-emotion` plugin to your `gatsby-config.js` file:
@@ -340,7 +340,7 @@ Import Emotion's `css` core package. You can then use the `css` prop to add [Emo
 
 ```jsx:title=src/pages/emotion-sample.js
 import React from "react"
-import { css } from "@emotion/core"
+import { css } from "@emotion/react"
 
 export default function EmotionSample() {
   return (
@@ -395,35 +395,41 @@ Hosting your own [Google Fonts](https://fonts.google.com/) locally within a proj
 
 - A [Gatsby site](/docs/quick-start)
 - The [Gatsby CLI](/docs/gatsby-cli/) installed
-- Choosing a font package from [the typefaces project](https://github.com/KyleAMathews/typefaces)
+- A chosen font package from [Fontsource](https://github.com/fontsource/fontsource)
 
 ### Directions
 
-1. Run `npm install typeface-your-chosen-font`, replacing `your-chosen-font` with the name of the font you want to install from [the typefaces project](https://github.com/KyleAMathews/typefaces).
+This example shows how to set up the [Open Sans](https://fonts.google.com/specimen/Open+Sans) font. If you have a different Google Font you want to use, you can find the corresponding package in [NPM](https://www.npmjs.com/search?q=fontsource) or the [packages directory in the Fontsource repository](https://github.com/fontsource/fontsource/tree/master/packages).
 
-An example to load the popular 'Source Sans Pro' font would be: `npm install typeface-source-sans-pro`.
+1. Run `npm install fontsource-open-sans` to download the necessary package files.
 
-2. Add `import "typeface-your-chosen-font"` to a layout template, page component, or `gatsby-browser.js`.
+2. Then within your app entry file or site component, import the font package. It is recommended you import it via the layout template (`layout.js`). However, importing via page component (`index.js`), or `gatsby-browser.js` are viable alternatives.
 
 ```jsx:title=src/components/layout.js
-import "typeface-your-chosen-font"
+import "fontsource-open-sans" // Defaults to weight 400 with all styles included.
 ```
 
+If you wish to select a particular weight or style, you may specify it by changing the import path.
+
+```jsx:title=src/components/layout.js
+import "fontsource-open-sans/500.css" // Weight 500 with all styles included.
+import "fontsource-open-sans/900-normal.css" // Select either normal or italic.
+```
+
+**Note**: The range of supported weights and styles a font may support is shown in each package's README file.
+
 3. Once it's imported, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.
 
 ```css:title=src/components/layout.css
 body {
-  font-family: "Your Chosen Font";
+  font-family: "Open Sans";
 }
 ```
 
-_NOTE: So for the above example, the relevant CSS declaration would be `font-family: 'Source Sans Pro';`_
-
 ### Additional resources
 
+- [Fontsource repo on GitHub](https://github.com/fontsource/fontsource)
 - [Typography.js](/docs/typography-js/) - Another option for using Google fonts on a Gatsby site
-- [The Typefaces Project Docs](https://github.com/KyleAMathews/typefaces/blob/master/README.md)
-- [Live example on Kyle Mathews' blog](https://www.bricolage.io/typefaces-easiest-way-to-self-host-fonts/)
 
 ## Using Font Awesome
 

docs/docs/tailwind-css.md

@@ -71,7 +71,7 @@ These steps assume you have a CSS-in-JS library already installed, and the examp
 1. Install the [Twin Babel Macro](https://github.com/ben-rogerson/twin.macro) and [Emotion](https://emotion.sh/docs/introduction)
 
 ```shell
-npm install -D twin.macro @emotion/core @emotion/styled gatsby-plugin-emotion
+npm install -D twin.macro @emotion/react @emotion/styled gatsby-plugin-emotion
 ```
 
 2. Import the Tailwind base styles

docs/docs/testing-css-in-js.md

@@ -2,9 +2,9 @@
 title: Testing CSS-in-JS
 ---
 
-Popular CSS-in-JS libraries like [styled-components](https://github.com/styled-components/styled-components) or [emotion](https://github.com/emotion-js/emotion) can also be tested with the help of [jest-styled-components](https://github.com/styled-components/jest-styled-components) or [jest-emotion](https://github.com/emotion-js/emotion/tree/master/packages/jest-emotion) respectively. These packages improve Jest's built-in snapshot testing experience and are a great way to help avoid unintended changes to your website's UI. Please refer to your package's documentation to see if it also offers testing capabilities.
+Popular CSS-in-JS libraries like [styled-components](https://github.com/styled-components/styled-components) or [emotion](https://github.com/emotion-js/emotion) can also be tested with the help of [jest-styled-components](https://github.com/styled-components/jest-styled-components) or [@emotion/jest](https://github.com/emotion-js/emotion/tree/master/packages/jest) respectively. These packages improve Jest's built-in snapshot testing experience and are a great way to help avoid unintended changes to your website's UI. Please refer to your package's documentation to see if it also offers testing capabilities.
 
-_Snapshot serializers_ like `jest-styled-components` or `jest-emotion` modify the standard output to a more meaningful and readable snapshot, e.g. by removing unnecessary information or displaying data in another format. Which ultimately leads to more comparable and effective snapshot tests.
+_Snapshot serializers_ like `jest-styled-components` or `@emotion/jest` modify the standard output to a more meaningful and readable snapshot, e.g. by removing unnecessary information or displaying data in another format. Which ultimately leads to more comparable and effective snapshot tests.
 
 By default snapshots of your styled components show the generated class names (which you didn't set) and no styling information. When changing the styles you'll only see the diff of some cryptic class names (hashes). That's why you should use the above mentioned _snapshot serializers_. They remove the hashes and format the CSS in style elements.
 
@@ -13,10 +13,10 @@ For this example you'll use emotion. The testing utilities of emotion and glamor
 ## Installation
 
 ```shell
-npm install --save-dev jest-emotion babel-plugin-emotion
+npm install --save-dev @emotion/jest @emotion/babel-plugin
 ```
 
-As [Gatsby's emotion plugin](/packages/gatsby-plugin-emotion/) is using `babel-plugin-emotion` under the hood you'll also need to install it so that Jest can use it.
+As [Gatsby's emotion plugin](/packages/gatsby-plugin-emotion/) is using `@emotion/babel-plugin` under the hood you'll also need to install it so that Jest can use it.
 
 If you followed along with the [Unit testing guide](/docs/unit-testing) you'll have the file `jest-preprocess.js` at the root of your project. Open that file and add the plugin:
 
@@ -34,8 +34,8 @@ module.exports = require("babel-jest").createTransformer(babelOptions)
 In order to tell Jest to use the serializer you'll need to create the file `setup-test-env.js` which will be run automatically before every test. Create the file `setup-test-env.js` at the root of your project. Insert this code into it:
 
 ```js:title=setup-test-env.js
-import { createSerializer } from "jest-emotion"
-import * as emotion from "@emotion/core"
+import { createSerializer } from "@emotion/jest"
+import * as emotion from "@emotion/react"
 
 expect.addSnapshotSerializer(createSerializer(emotion))
 ```
@@ -89,15 +89,15 @@ exports[`Button renders correctly 1`] = `
 If your styled component depends on `theme` via `ThemeProvider` you'll have two options:
 
 - Wrap all your components with the `ThemeProvider`
-- Use API helpers (have a look at the library's documentation, e.g. [styled-components](https://github.com/styled-components/jest-styled-components#theming) or [emotion](https://github.com/emotion-js/emotion/tree/master/packages/emotion-theming#createbroadcast-function))
+- Use API helpers (have a look at the library's documentation, e.g. [styled-components](https://github.com/styled-components/jest-styled-components#theming) or [emotion](https://emotion.sh/docs/theming#api))
 
 And this is where snapshots tests really shine. If you change, e.g. the primary color in your theme file you'll see which components get affected by this change. This way you can catch unintended changes to the style of your components.
 
 This example uses the first option:
 
 ```js:title=src/components/Wrapper.test.js
 import React from "react"
-import { ThemeProvider } from "emotion-theming"
+import { ThemeProvider, withTheme } from "@emotion/react"
 import renderer from "react-test-renderer"
 
 const theme = {

docs/docs/troubleshooting-common-errors.md

@@ -32,7 +32,7 @@ For some plugins like emotion, styled-components, or Sass, it won't be enough to
 
 Here are some examples of plugins that require you to install more than just the plugin:
 
-- [gatsby-plugin-emotion](/packages/gatsby-plugin-emotion/): `@emotion/core`, and `@emotion/styled`
+- [gatsby-plugin-emotion](/packages/gatsby-plugin-emotion/): `@emotion/react`, and `@emotion/styled`
 - [gatsby-plugin-styled-components](/packages/gatsby-plugin-styled-components/): `styled-components`, and `babel-plugin-styled-components`
 - [gatsby-plugin-sass](/packages/gatsby-plugin-sass/): `node-sass`, or `dart-sass`
 - [gatsby-plugin-material-ui](/packages/gatsby-plugin-material-ui/): `@material-ui/styles`
@@ -50,18 +50,18 @@ success run queries - 0.095s - 8/8 84.63/s
 
 Generating SSR bundle failed
 
-Can't resolve '@emotion/core' in '/Users/you/tmp/gatsby-site/.cache' // highlight-line
+Can't resolve '@emotion/react' in '/Users/you/tmp/gatsby-site/.cache' // highlight-line
 
 File: .cache/develop-static-entry.js
 ```
 
-This error is a result of Gatsby having failed to find `@emotion/core` because `gatsby-plugin-emotion` has been installed and added to the `gatsby-config`, without installing the emotion library. Install it like this:
+This error is a result of Gatsby having failed to find `@emotion/react` because `gatsby-plugin-emotion` has been installed and added to the `gatsby-config`, without installing the emotion library. Install it like this:
 
 ```shell
-npm install @emotion/core
+npm install @emotion/react
 ```
 
-Or replace `@emotion/core` with the name of the library that is missing. Installing the plugin and any necessary libraries as well as adding the plugin to your `gatsby-config` should resolve this error.
+Or replace `@emotion/react` with the name of the library that is missing. Installing the plugin and any necessary libraries as well as adding the plugin to your `gatsby-config` should resolve this error.
 
 ### Issues with `fs` resolution
 

docs/docs/using-web-fonts.md

@@ -18,36 +18,32 @@ Some examples of web font services include [Google Fonts](https://fonts.google.c
 
 ### Using Google Fonts
 
-The fastest way to get started using Google Fonts is by choosing a font from [the typefaces project](https://github.com/KyleAMathews/typefaces). This example shows how you can add Open Sans to your project.
+The fastest way to get started using Google Fonts is by choosing a font from [Fontsource](https://github.com/fontsource/fontsource).
 
-First, install the typeface package with npm:
+This example shows how to set up the [Open Sans](https://fonts.google.com/specimen/Open+Sans) font. If you have a different Google Font you want to use, you can find the corresponding package in [NPM](https://www.npmjs.com/search?q=fontsource) or the [packages directory in the Fontsource repository](https://github.com/fontsource/fontsource/tree/master/packages).
 
-```bash
-npm install --save typeface-open-sans
-```
+1. Run `npm install fontsource-open-sans` to download the necessary package files.
 
-Or with yarn:
+2. Then within your app entry file or site component, import the font package. It is recommended you import it via the layout template (`layout.js`). However, importing via page component (`index.js`), or `gatsby-browser.js` are viable alternatives.
 
-```bash
-yarn add typeface-open-sans
+```jsx:title=src/components/layout.js
+import "fontsource-open-sans" // Defaults to weight 400 with all styles included.
 ```
 
-In your `layout.js` file, import the typeface.
+If you wish to select a particular weight or style, you may specify it by changing the import path.
 
 ```jsx:title=src/components/layout.js
-import "typeface-open-sans"
+import "fontsource-open-sans/500.css" // Weight 500 with all styles included.
+import "fontsource-open-sans/900-normal.css" // Select either normal or italic.
 ```
 
-Next, add the typeface name to the appropriate place in your CSS. In this case, you will override the `body` element's `font-family` default values.
+**Note**: The range of supported weights and styles a font may support is shown in each package's README file.
+
+3. Once it's imported, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.
 
 ```css:title=src/components/layout.css
 body {
-  color: hsla(0, 0%, 0%, 0.8);
-  // highlight-next-line
-  font-family: "Open Sans", georgia, serif;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
+  font-family: "Open Sans";
 }
 ```