Emotion update (#10500)

ChristopherBiscardi · DSchau · commit 50ea59aa6593 · 2018-12-19T12:01:12.000-06:00
* Move babel-plugin-emotion to v10

Removed legacy version support which also reduces the number of
packages that need to be installed for the tutorial, etc.

* update tutorial install packages

* update global styles tutorial

* Update README.md
diff --git a/docs/docs/creating-global-styles.md b/docs/docs/creating-global-styles.md
@@ -75,7 +75,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 --save gatsby-plugin-emotion emotion emotion-server react-emotion
+npm install --save gatsby-plugin-emotion @emotion/core @emotion/styled
 ```
 
 Create `gatsby-config.js` and add the Emotion plugin:
@@ -90,21 +90,27 @@ Next, add a layout component at `src/components/layout.js`:
 
 ```jsx:title=src/components/layout.js
 import React from "react"
-import styled, { injectGlobal } from "react-emotion"
-
-injectGlobal`
-  div {
-    background: red;
-    color: white;
-  }
-`
+import { Global, css } from "@emotion/core"
+import styled from "@emotion/styled"
 
 const Wrapper = styled("div")`
   border: 2px solid green;
   padding: 10px;
 `
 
-export default ({ children }) => <Wrapper>{children}</Wrapper>
+export default ({ children }) => (
+  <Wrapper>
+    <Global
+      styles={css`
+        div {
+          background: red;
+          color: white;
+        }
+      `}
+    />
+    {children}
+  </Wrapper>
+)
 ```
 
 Then, update `src/pages/index.js` to use the layout:
diff --git a/docs/tutorial/part-four/index.md b/docs/tutorial/part-four/index.md
@@ -96,7 +96,7 @@ Then install some other needed dependencies at the root of the project. You'll u
 "Kirkham", and you'll try out a CSS-in-JS library, ["Emotion"](https://emotion.sh/):
 
 ```shell
-npm install --save gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion emotion emotion-server @emotion/core
+npm install --save gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion @emotion/core
 ```
 
 Set up a site similar to what you ended with in [Part Three](/tutorial/part-three). This site will have a layout component and two page components:
diff --git a/packages/gatsby-plugin-emotion/README.md b/packages/gatsby-plugin-emotion/README.md
@@ -4,10 +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+**
+
+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
 
 ```
-npm install --save gatsby-plugin-emotion emotion emotion-server @emotion/core @emotion/styled
+npm install --save gatsby-plugin-emotion @emotion/core @emotion/styled
 ```
 
 ## How to use
diff --git a/packages/gatsby-plugin-emotion/package.json b/packages/gatsby-plugin-emotion/package.json
@@ -7,10 +7,8 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.1.6",
-    "@babel/runtime": "^7.0.0",
-    "babel-plugin-emotion": "^10.0.0",
-    "babel-plugin-jsx-pragmatic": "^1.0.2"
+    "@emotion/babel-preset-css-prop": "10.0.5",
+    "@babel/runtime": "^7.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0",
@@ -27,9 +25,7 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "@emotion/core": "^10.0.0",
-    "emotion": "^10.0.0",
-    "emotion-server": "^10.0.0",
+    "@emotion/core": "^10.0.5",
     "gatsby": ">2.0.0"
   },
   "repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion",
diff --git a/packages/gatsby-plugin-emotion/src/gatsby-browser.js b/packages/gatsby-plugin-emotion/src/gatsby-browser.js
diff --git a/packages/gatsby-plugin-emotion/src/gatsby-node.js b/packages/gatsby-plugin-emotion/src/gatsby-node.js
@@ -1,27 +1,7 @@
 export const onCreateBabelConfig = ({ actions }, pluginOptions) => {
-  const pragmaName = `___EmotionJSX`
-
-  actions.setBabelPlugin({
-    name: `babel-plugin-jsx-pragmatic`,
+  actions.setBabelPreset({
+    name: `@emotion/babel-preset-css-prop`,
     options: {
-      export: `jsx`,
-      module: `@emotion/core`,
-      import: pragmaName,
-    },
-  })
-
-  actions.setBabelPlugin({
-    name: `@babel/plugin-transform-react-jsx`,
-    options: {
-      pragma: pragmaName,
-      pragmaFrag: `React.Fragment`,
-    },
-  })
-
-  actions.setBabelPlugin({
-    name: `babel-plugin-emotion`,
-    options: {
-      cssPropOptimization: true,
       sourceMap: process.env.NODE_ENV !== `production`,
       autoLabel: process.env.NODE_ENV !== `production`,
       ...(pluginOptions ? pluginOptions : {}),
diff --git a/packages/gatsby-plugin-emotion/src/gatsby-ssr.js b/packages/gatsby-plugin-emotion/src/gatsby-ssr.js
diff --git a/packages/gatsby-plugin-emotion/src/wrap-element.js b/packages/gatsby-plugin-emotion/src/wrap-element.js
diff --git a/yarn.lock b/yarn.lock
@@ -1069,6 +1069,16 @@
     follow-redirects "^1.2.5"
     is-buffer "^1.1.5"
 
+"@emotion/babel-preset-css-prop@10.0.5":
+  version "10.0.5"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-10.0.5.tgz#955485c6f621247ee35dc1e6bd8fef0ba1d3286f"
+  integrity sha512-Mf1651pWaqraE2jJdX1/+ArCBLhubxNoNrs0mfYOriIRxwnmjoKQLIEYTMNl/K7ZkIu2PNwvLKGv74fo3wYovA==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.1.6"
+    babel-plugin-emotion "^10.0.5"
+    babel-plugin-jsx-pragmatic "^1.0.2"
+    object-assign "^4.1.1"
+
 "@emotion/hash@0.7.1":
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53"
@@ -1079,10 +1089,10 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
   integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==
 
-"@emotion/serialize@0.11.0":
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.0.tgz#9332b483a112af7b515d20470a7bf1aa5f8dcf6c"
-  integrity sha512-SpUumzuN7CxEGvJKe3bul8+VKdcNleACokv5YgS+k4KQIurdq7dbm4sM7aT9hBx3ccMpDfg5BYVfR3NPoeU5PA==
+"@emotion/serialize@^0.11.3":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.3.tgz#c4af2d96e3ddb9a749b7b567daa7556bcae45af2"
+  integrity sha512-6Q+XH/7kMdHwtylwZvdkOVMydaGZ989axQ56NF7urTR7eiDMLGun//pFUy31ha6QR4C6JB+KJVhZ3AEAJm9Z1g==
   dependencies:
     "@emotion/hash" "0.7.1"
     "@emotion/memoize" "0.7.1"
@@ -2972,15 +2982,15 @@ babel-plugin-dynamic-import-node@^1.2.0:
   dependencies:
     babel-plugin-syntax-dynamic-import "^6.18.0"
 
-babel-plugin-emotion@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.0.tgz#ceb177a64d5ccba3c28d7de4a0697d0f3a66315f"
-  integrity sha512-O0ykSwaJQVHuZcAd0/TuMbG6QzuArGheL9XeEoQfgBeFlcyrGEj/2JexsCk4iMMiykxW7hfulm0zKy864PWOSw==
+babel-plugin-emotion@^10.0.5:
+  version "10.0.5"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.5.tgz#05ec47cde94f984b0b2aebdd41f81876cf9cbb24"
+  integrity sha512-ezct2vKACg4juSV0/A/4QIDJu2+5Sjna/8rX/LXY8D0qG8YEP3fu8pe5FqZ9yFGa8WOJ1sivf3/QKM/5C8naIg==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@emotion/hash" "0.7.1"
     "@emotion/memoize" "0.7.1"
-    "@emotion/serialize" "0.11.0"
+    "@emotion/serialize" "^0.11.3"
     babel-plugin-macros "^2.0.0"
     babel-plugin-syntax-jsx "^6.18.0"
     convert-source-map "^1.5.0"
