Merge pull request #1 from kimbaudi/master

update gatsby-plugin-emotion, gatsby docs, and packages references to emotion v11

Author: jHards

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 (

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/tutorial/building-a-theme.md

@@ -1098,7 +1098,7 @@ You can make your theme styles extendable using the `gatsby-plugin-theme-ui` pac
 Install dependencies:
 
 ```shell
-yarn workspace gatsby-theme-events add gatsby-plugin-theme-ui theme-ui @emotion/core @emotion/styled @mdx-js/react
+yarn workspace gatsby-theme-events add gatsby-plugin-theme-ui theme-ui @emotion/react @emotion/styled @mdx-js/react
 ```
 
 Then, add the `gatsby-plugin-theme-ui` plugin to the `gatsby-theme-events/gatsby-config.js` file:
@@ -1344,8 +1344,8 @@ It's important to namespace your theme. It helps differentiate between published
     "react-dom": "^16.8.6"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.14",
-    "@emotion/styled": "^10.0.14",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
     "@mdx-js/react": "^1.0.27",
     "gatsby-plugin-theme-ui": "^0.2.6",
     "gatsby-source-filesystem": "^2.1.5",

docs/tutorial/part-seven/index.md

@@ -306,7 +306,7 @@ Return to `src/pages/index.js`, query for your markdown slugs, and create links.
 
 ```jsx:title=src/pages/index.js
 import React from "react"
-import { css } from "@emotion/core"
+import { css } from "@emotion/react"
 import { Link, graphql } from "gatsby" // highlight-line
 import { rhythm } from "../utils/typography"
 import Layout from "../components/layout"

docs/tutorial/part-six/index.md

@@ -87,7 +87,7 @@ Like with the `src/pages/my-files.js` page, replace `src/pages/index.js` with th
 ```jsx:title=src/pages/index.js
 import React from "react"
 import { graphql } from "gatsby"
-import { css } from "@emotion/core"
+import { css } from "@emotion/react"
 import { rhythm } from "../utils/typography"
 import Layout from "../components/layout"
 

packages/gatsby-admin/src/components/recipes-gui/resource-message.js

@@ -2,7 +2,7 @@
 /* eslint-disable */
 import React from "react"
 import { MdRefresh, MdBrightness1 } from "react-icons/md"
-import { keyframes } from "@emotion/core"
+import { keyframes } from "@emotion/react"
 import { BaseAnchor, SuccessIcon } from "gatsby-interface"
 import { makeResourceId } from "./utils"
 import { jsx } from "theme-ui"

packages/gatsby-admin/src/pages/plugins.tsx

@@ -3,7 +3,7 @@ import { jsx, Flex } from "strict-ui"
 import { PageProps } from "gatsby"
 import { useQuery } from "urql"
 import { Spinner } from "theme-ui"
-import { Global } from "@emotion/core"
+import { Global } from "@emotion/react"
 import { useMutation } from "urql"
 import { useState, Fragment, useEffect } from "react"
 import {

packages/gatsby-plugin-emotion/README.md

@@ -4,15 +4,15 @@ Provide support for using the css-in-js library
 [Emotion](https://github.com/emotion-js/emotion) including server side
 rendering.
 
-**This plugin supports Emotion v10+**
+**This plugin supports Emotion v11+**
 
 Older versions should use versions of this plugin which support Emotion 8 and 9. Check out the Emotion 10 [migration
 guide](https://emotion.sh/docs/migrating-to-emotion-10#incremental-migration) for more information on how to upgrade.
 
 ## Install
 
 ```shell
-npm install gatsby-plugin-emotion @emotion/styled @emotion/react
+npm install gatsby-plugin-emotion @emotion/react @emotion/styled
 ```
 
 ## How to use
@@ -25,10 +25,10 @@ module.exports = {
     {
       resolve: `gatsby-plugin-emotion`,
       options: {
-        // Accepts the following options, all of which are defined by `babel-plugin-emotion` plugin.
+        // Accepts the following options, all of which are defined by `@emotion/babel-plugin` plugin.
         // The values for each key in this example are the defaults the plugin uses.
         sourceMap: true,
-        autoLabel: process.env.NODE_ENV !== "production",
+        autoLabel: 'dev-only',
         labelFormat: `[local]`,
         cssPropOptimization: true,
       },
@@ -39,11 +39,11 @@ module.exports = {
 
 ## Options
 
-The plugin supports the same options that you can pass into [`babel-plugin-emotion`](https://emotion.sh/docs/babel-plugin-emotion#options).
+The plugin supports the same options that you can pass into [`@emotion/babel-plugin`](https://emotion.sh/docs/@emotion/babel-plugin#options).
 
 | Option              | Type    | Description                                                                                                                                                                                                                                                                                                                                    | Default                                 | Required |
 | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------- |
 | sourceMap           | boolean | Tells the plugin to inject source maps for use in browser dev tools in development.                                                                                                                                                                                                                                                            | `true`                                  |          |
-| autoLabel           | boolean | Automatically adds the label property to styles so that class names generated by css or styled include the name of the variable the result is assigned to. You can read more about this option in [`babel-plugin-emotion`'s docs](https://emotion.sh/docs/babel-plugin-emotion#autolabel)                                                      | `process.env.NODE_ENV !== 'production'` |          |
+| autoLabel           | `'dev-only' | 'always' | 'never'` | Automatically adds the label property to styles so that class names generated by css or styled include the name of the variable the result is assigned to. You can read more about this option in [`@emotion/babel-plugin`'s docs](https://emotion.sh/docs/@emotion/babel-plugin#autolabel)                                                      | `dev-only` |          |
 | labelFormat         | string  | Only works when `autoLabel` is set to true. It allows you to define the format of the resulting label. The format is defined via string where variable parts are enclosed in square brackets []. For example `labelFormat: "my-classname--[local]"`, where `[local]` will be replaced with the name of the variable the result is assigned to. | "[local]"                               |          |
 | cssPropOptimization | boolean | Assumes that you are using something to make `@emotion/react`’s jsx function work for all jsx. If you are not doing so and you do not want such optimizations to occur, disable this option.                                                                                                                                                   | `true`                                  |          |

packages/gatsby-plugin-emotion/src/__tests__/gatsby-node.js

@@ -15,7 +15,7 @@ describe(`gatsby-plugin-emotion`, () => {
         ),
         options: {
           sourceMap: true,
-          autoLabel: true,
+          autoLabel: `dev-only`,
         },
       })
     })
@@ -33,7 +33,7 @@ describe(`gatsby-plugin-emotion`, () => {
         ),
         options: {
           sourceMap: true,
-          autoLabel: true,
+          autoLabel: `dev-only`,
           useBuiltIns: true,
         },
       })
@@ -63,7 +63,7 @@ describe(`gatsby-plugin-emotion`, () => {
           ),
           options: {
             sourceMap: false,
-            autoLabel: false,
+            autoLabel: `dev-only`,
           },
         })
       })

packages/gatsby-plugin-emotion/src/gatsby-node.js

@@ -16,10 +16,10 @@ exports.pluginOptionsSchema = ({ Joi }) =>
       .description(
         `This option tells the plugin to inject source maps for use in browser dev tools in development.`
       ),
-    autoLabel: Joi.boolean()
-      .default(process.env.NODE_ENV !== `production`)
+    autoLabel: Joi.string()
+      .default(`dev-only`)
       .description(
-        `This option automatically adds the label property to styles so that class names generated by css or styled include the name of the variable the result is assigned to. You can read more about this option in babel-plugin-emotion's docs: https://emotion.sh/docs/babel-plugin-emotion#autolabel`
+        `This option automatically adds the label property to styles so that class names generated by css or styled include the name of the variable the result is assigned to. You can read more about this option in @emotion/babel-plugin's docs: https://emotion.sh/docs/@emotion/babel-plugin#autolabel`
       ),
     labelFormat: Joi.string()
       .default(`[local]`)

packages/gatsby-recipes/README.md

@@ -77,7 +77,7 @@ Install necessary NPM packages
 <!-- refer to the API in this doc to see what APIs are available, like `NPMPackage` -->
 
 <NPMPackage name="gatsby-plugin-emotion" />
-<NPMPackage name="@emotion/core" />
+<NPMPackage name="@emotion/react" />
 <NPMPackage name="@emotion/styled" />
 
 ---

packages/gatsby-recipes/recipes/chakra-ui.mdx

@@ -8,9 +8,8 @@ This recipes sets up and configures [gatsby-plugin-chakra-ui](https://www.gatsby
 
 ## Installs necessary NPM packages
 
-<NPMPackage name="@emotion/core" />
+<NPMPackage name="@emotion/react" />
 <NPMPackage name="@emotion/styled" />
-<NPMPackage name="emotion-theming" />
 <NPMPackage name="@chakra-ui/core" />
 <NPMPackage name="gatsby-plugin-chakra-ui" />
 

packages/gatsby-recipes/recipes/emotion.mdx

@@ -11,7 +11,7 @@ This recipe:
 Installs necessary NPM packages.
 
 <NPMPackage name="gatsby-plugin-emotion" />
-<NPMPackage name="@emotion/core" />
+<NPMPackage name="@emotion/react" />
 <NPMPackage name="@emotion/styled" />
 
 ---

packages/gatsby/src/redux/actions/public.js

@@ -366,9 +366,9 @@ ${reservedFields.map(f => `  * "${f}"`).join(`\n`)}
     const truncatedPath = truncatePath(page.path)
     report.warn(
       report.stripIndent(`
-        The path to the following page is longer than the supported limit on most 
+        The path to the following page is longer than the supported limit on most
         operating systems and will cause an ENAMETOOLONG error. The path has been
-        truncated to prevent this. 
+        truncated to prevent this.
 
         Original Path: ${page.path}
 
@@ -1069,7 +1069,7 @@ actions.setBabelOptions = (options: Object, plugin?: ?Plugin = null) => {
  * @param {Object} config.options Options to pass to the Babel plugin.
  * @example
  * setBabelPlugin({
- *   name:  `babel-plugin-emotion`,
+ *   name:  `@emotion/babel-plugin`,
  *   options: {
  *     sourceMap: true,
  *   },