feat(gatsby-plugin-emotion): update plugin for emotion v10 (#10226)

# 🎉 Emotion v10 is here! 🎉 - [X] Update dependencies - [X] Update critical style handling - [X] Add Babel config for `jsx` pragma - [X] Update plugin install instructions - [X] Update Gatsby tutorial (part 4) - [X] Update the "using emotion" example
gatsbyjs · Dec 4, 2018 · 5754c2c · 5754c2c
1 parent 2abc769
commit 5754c2c
Show file tree

Hide file tree

Showing 11 changed files with 157 additions and 76 deletions.
diff --git a/docs/tutorial/part-four/index.md b/docs/tutorial/part-four/index.md
@@ -96,21 +96,21 @@ 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 react-emotion emotion-server
+npm install --save gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion emotion emotion-server @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:
 
 ```jsx:title=src/components/layout.js
 import React from "react"
-import { css } from "react-emotion"
+import { css } from "@emotion/core"
 import { Link } from "gatsby"
 
 import { rhythm } from "../utils/typography"
 
 export default ({ children }) => (
   <div
-    className={css`
+    css={css`
       margin: 0 auto;
       max-width: 700px;
       padding: ${rhythm(2)};
@@ -119,7 +119,7 @@ export default ({ children }) => (
   >
     <Link to={`/`}>
       <h3
-        className={css`
+        css={css`
           margin-bottom: ${rhythm(2)};
           display: inline-block;
           font-style: normal;
@@ -130,7 +130,7 @@ export default ({ children }) => (
     </Link>
     <Link
       to={`/about/`}
-      className={css`
+      css={css`
         float: right;
       `}
     >
@@ -292,7 +292,7 @@ Go ahead and add a `<StaticQuery />` to your `src/components/layout.js` file, an
 
 ```jsx{3,8-18,35,48-49}:title=src/components/layout.js
 import React from "react"
-import { css } from "react-emotion"
+import { css } from "@emotion/core"
 import { StaticQuery, Link, graphql } from "gatsby"
 
 import { rhythm } from "../utils/typography"
@@ -310,7 +310,7 @@ export default ({ children }) => (
     `}
     render={data => (
       <div
-        className={css`
+        css={css`
           margin: 0 auto;
           max-width: 700px;
           padding: ${rhythm(2)};
@@ -319,7 +319,7 @@ export default ({ children }) => (
       >
         <Link to={`/`}>
           <h3
-            className={css`
+            css={css`
               margin-bottom: ${rhythm(2)};
               display: inline-block;
               font-style: normal;
@@ -330,7 +330,7 @@ export default ({ children }) => (
         </Link>
         <Link
           to={`/about/`}
-          className={css`
+          css={css`
             float: right;
           `}
         >

diff --git a/examples/using-emotion/package.json b/examples/using-emotion/package.json
@@ -4,23 +4,25 @@
   "description": "Gatsby example site using using-emotion",
   "author": "Tegan Churchill <churchill.tegan@gmail.com>",
   "dependencies": {
-    "emotion": "^9.2.12",
-    "emotion-server": "^9.2.12",
+    "@emotion/core": "^10.0.0",
+    "@emotion/styled": "^10.0.0",
+    "emotion": "^10.0.0",
+    "emotion-server": "^10.0.0",
     "gatsby": "^2.0.0",
     "gatsby-plugin-emotion": "^2.0.5",
     "gatsby-plugin-google-analytics": "^2.0.5",
     "gatsby-plugin-offline": "^2.0.5",
     "gatsby-plugin-react-helmet": "^3.0.0",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
-    "react-emotion": "^9.2.12",
     "react-helmet": "^5.2.0"
   },
   "license": "MIT",
   "main": "n/a",
   "scripts": {
     "develop": "gatsby develop",
     "build": "gatsby build",
+    "serve": "gatsby serve",
     "start": "npm run develop"
   }
 }
diff --git a/examples/using-emotion/src/pages/index.js b/examples/using-emotion/src/pages/index.js
@@ -1,31 +1,22 @@
 import React, { Fragment } from "react"
 import Helmet from "react-helmet"
-import styled, { css, injectGlobal } from "react-emotion"
-// You can import everything from "react-emotion"
+import styled from "@emotion/styled"
+import { css, Global } from "@emotion/core"
 
 // Emotion supports different styling options, all of which are supported by gatsby-plugin-emotion out of the box
 
-injectGlobal`
+// Create styles for the Global component
+const globalStyles = css`
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
-  html, body {
-    font-family: -apple-system,
-      BlinkMacSystemFont,
-      "Segoe UI",
-      "Roboto",
-      "Roboto Light",
-      "Oxygen",
-      "Ubuntu",
-      "Cantarell",
-      "Fira Sans",
-      "Droid Sans",
-      "Helvetica Neue",
-      sans-serif,
-      "Apple Color Emoji",
-      "Segoe UI Emoji",
+  html,
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+      "Roboto Light", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+      "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
       "Segoe UI Symbol";
   }
 `
@@ -41,7 +32,7 @@ const Wrapper = styled.section`
   width: 100vw;
 `
 
-// Using css with template literal
+// Using css with a template literal
 const title = css`
   font-size: 1.5em;
   color: #ff79c6;
@@ -52,28 +43,29 @@ const title = css`
   }
 `
 
-// Using css with object
-const subtitle = css({
-  color: `#bd93f9`,
-})
-
 const IndexPage = () => (
   <Fragment>
     <Helmet>
       <title>Gatsby Emotion</title>
       <meta name="description" content="Gatsby example site using Emotion" />
       <meta name="referrer" content="origin" />
     </Helmet>
+    <Global styles={globalStyles} />
     <Wrapper>
-      <h1 className={title}>
+      <h1 css={title}>
         Hello World, this is my first component styled with
         {` `}
         <a href="https://emotion.sh/">emotion</a>!
       </h1>
-      <p className={subtitle}>
+      <p
+        // Styling "inline" via css prop and object styles
+        css={{
+          color: `#bd93f9`,
+        }}
+      >
         <a
           href="https://www.gatsbyjs.org/packages/gatsby-plugin-emotion/"
-          // Styling “inline” with css prop
+          // Styling “inline” via css prop and a template literal
           css={css`
             color: inherit;
           `}

diff --git a/packages/gatsby-plugin-emotion/.babelrc b/packages/gatsby-plugin-emotion/.babelrc
@@ -1,6 +1,3 @@
 {
-  "presets": [
-    ["babel-preset-gatsby-package", { "browser": true }]
-  ]
+  "presets": [["babel-preset-gatsby-package", { "browser": true }]]
 }
-
diff --git a/packages/gatsby-plugin-emotion/README.md b/packages/gatsby-plugin-emotion/README.md
@@ -7,7 +7,7 @@ rendering.
 ## Install
 
 ```
-npm install --save gatsby-plugin-emotion emotion emotion-server react-emotion
+npm install --save gatsby-plugin-emotion emotion emotion-server @emotion/core @emotion/styled
 ```
 
 ## How to use

diff --git a/packages/gatsby-plugin-emotion/package.json b/packages/gatsby-plugin-emotion/package.json
@@ -7,7 +7,10 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.0.0"
+    "@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"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0",
@@ -24,15 +27,15 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "emotion": "7 || 8 || 9",
-    "emotion-server": "7 || 8 || 9",
-    "gatsby": ">2.0.0-alpha"
+    "@emotion/core": "^10.0.0",
+    "emotion": "^10.0.0",
+    "emotion-server": "^10.0.0",
+    "gatsby": ">2.0.0"
   },
   "repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion",
   "scripts": {
     "build": "babel src --out-dir . --ignore **/__tests__",
     "prepare": "cross-env NODE_ENV=production npm run build",
     "watch": "babel -w src --out-dir . --ignore **/__tests__"
-  },
-  "gitHead": "5bd5aebe066b9875354a81a4b9ed98722731c465"
+  }
 }
diff --git a/packages/gatsby-plugin-emotion/src/gatsby-browser.js b/packages/gatsby-plugin-emotion/src/gatsby-browser.js
@@ -1,11 +1,3 @@
-/* globals window */
-import { hydrate } from "emotion"
+import { wrapElement } from "./wrap-element"
 
-exports.onClientEntry = () => {
-  if (
-    typeof window !== `undefined` &&
-    typeof window.__EMOTION_CRITICAL_CSS_IDS__ !== `undefined`
-  ) {
-    hydrate(window.__EMOTION_CRITICAL_CSS_IDS__)
-  }
-}
+export const wrapRootElement = ({ element }) => wrapElement(element)
diff --git a/packages/gatsby-plugin-emotion/src/gatsby-node.js b/packages/gatsby-plugin-emotion/src/gatsby-node.js
@@ -1,10 +1,28 @@
-exports.onCreateBabelConfig = ({ actions }, pluginOptions) => {
+export const onCreateBabelConfig = ({ actions }, pluginOptions) => {
+  const pragmaName = `___EmotionJSX`
+
+  actions.setBabelPlugin({
+    name: `babel-plugin-jsx-pragmatic`,
+    options: {
+      export: `jsx`,
+      module: `@emotion/core`,
+      import: pragmaName,
+    },
+  })
+
+  actions.setBabelPlugin({
+    name: `@babel/plugin-transform-react-jsx`,
+    options: {
+      pragma: pragmaName,
+    },
+  })
+
   actions.setBabelPlugin({
     name: `babel-plugin-emotion`,
     options: {
+      cssPropOptimization: true,
       sourceMap: process.env.NODE_ENV !== `production`,
       autoLabel: process.env.NODE_ENV !== `production`,
-      hoist: 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
@@ -2,22 +2,24 @@ import React from "react"
 import { renderToString } from "react-dom/server"
 import { extractCritical } from "emotion-server"
 
-exports.replaceRenderer = ({
+import { wrapElement } from "./wrap-element"
+
+export const replaceRenderer = ({
   bodyComponent,
   replaceBodyHTMLString,
   setHeadComponents,
 }) => {
-  const { html, ids, css } = extractCritical(renderToString(bodyComponent))
-
-  const criticalStyle = <style dangerouslySetInnerHTML={{ __html: css }} />
-  const criticalIds = (
-    <script
-      dangerouslySetInnerHTML={{
-        __html: `window.__EMOTION_CRITICAL_CSS_IDS__ = ${JSON.stringify(ids)};`,
-      }}
-    />
+  const { html, ids, css } = extractCritical(
+    renderToString(wrapElement(bodyComponent))
   )
 
-  setHeadComponents([criticalIds, criticalStyle])
+  setHeadComponents([
+    // eslint-disable-next-line react/jsx-key
+    <style
+      data-emotion-css={ids.join(` `)}
+      dangerouslySetInnerHTML={{ __html: css }}
+    />,
+  ])
+
   replaceBodyHTMLString(html)
 }
diff --git a/packages/gatsby-plugin-emotion/src/wrap-element.js b/packages/gatsby-plugin-emotion/src/wrap-element.js
@@ -0,0 +1,7 @@
+import React from "react"
+import { cache } from "emotion"
+import { CacheProvider } from "@emotion/core"
+
+export const wrapElement = element => (
+  <CacheProvider value={cache}>{element}</CacheProvider>
+)