feat(gatsby-plugin-emotion): upgrade plugin for emotion 10 support

examples/using-emotion/package.json

@@ -4,23 +4,25 @@
   "description": "Gatsby example site using using-emotion",
   "author": "Tegan Churchill <[email protected]>",
   "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"
   }
 }

examples/using-emotion/src/pages/index.js

@@ -1,7 +1,8 @@
 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 { injectGlobal } from "emotion"
+import { css } from "@emotion/core"
 
 // Emotion supports different styling options, all of which are supported by gatsby-plugin-emotion out of the box
 
@@ -52,11 +53,6 @@ const title = css`
   }
 `
 
-// Using css with object
-const subtitle = css({
-  color: `#bd93f9`,
-})
-
 const IndexPage = () => (
   <Fragment>
     <Helmet>
@@ -65,12 +61,16 @@ const IndexPage = () => (
       <meta name="referrer" content="origin" />
     </Helmet>
     <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
+        css={css({
+          color: `#bd93f9`,
+        })}
+      >
         <a
           href="https://www.gatsbyjs.org/packages/gatsby-plugin-emotion/"
           // Styling “inline” with css prop

packages/gatsby-plugin-emotion/.babelrc

@@ -3,4 +3,3 @@
     ["babel-preset-gatsby-package", { "browser": true }]
   ]
 }
-

packages/gatsby-plugin-emotion/.npmignore

@@ -1,34 +0,0 @@
-# Logs
-logs
-*.log
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
-# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
-node_modules
-*.un~
-yarn.lock
-src
-flow-typed
-coverage
-decls
-examples

packages/gatsby-plugin-emotion/CHANGELOG.md

@@ -1,82 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-<a name="2.0.6"></a>
-
-## [2.0.6](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion/compare/[email protected]@2.0.6) (2018-10-29)
-
-**Note:** Version bump only for package gatsby-plugin-emotion
-
-<a name="2.0.5"></a>
-
-## [2.0.5](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion/compare/[email protected]@2.0.5) (2018-09-17)
-
-**Note:** Version bump only for package gatsby-plugin-emotion
-
-<a name="2.0.0-rc.5"></a>
-
-# [2.0.0-rc.5](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion/compare/[email protected]@2.0.0-rc.5) (2018-09-11)
-
-**Note:** Version bump only for package gatsby-plugin-emotion
-
-<a name="2.0.0-rc.4"></a>
-
-# [2.0.0-rc.4](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion/compare/[email protected]@2.0.0-rc.4) (2018-09-11)
-
-**Note:** Version bump only for package gatsby-plugin-emotion
-
-<a name="2.0.0-rc.3"></a>
-
-# [2.0.0-rc.3](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion/compare/[email protected]@2.0.0-rc.3) (2018-09-11)
-
-**Note:** Version bump only for package gatsby-plugin-emotion
-
-<a name="2.0.0-rc.2"></a>
-
-# [2.0.0-rc.2](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion/compare/[email protected]@2.0.0-rc.2) (2018-09-11)
-
-**Note:** Version bump only for package gatsby-plugin-emotion
-
-<a name="2.0.0-rc.1"></a>
-
-# [2.0.0-rc.1](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion/compare/[email protected]@2.0.0-rc.1) (2018-08-29)
-
-**Note:** Version bump only for package gatsby-plugin-emotion
-
-<a name="2.0.0-rc.0"></a>
-
-# [2.0.0-rc.0](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion/compare/[email protected]@2.0.0-rc.0) (2018-08-21)
-
-**Note:** Version bump only for package gatsby-plugin-emotion
-
-<a name="2.0.0-beta.4"></a>
-
-# [2.0.0-beta.4](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion/compare/[email protected]@2.0.0-beta.4) (2018-08-20)
-
-**Note:** Version bump only for package gatsby-plugin-emotion
-
-<a name="2.0.0-beta.3"></a>
-
-# [2.0.0-beta.3](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion/compare/[email protected]@2.0.0-beta.3) (2018-07-21)
-
-**Note:** Version bump only for package gatsby-plugin-emotion
-
-<a name="2.0.0-beta.2"></a>
-
-# [2.0.0-beta.2](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion/compare/[email protected]@2.0.0-beta.2) (2018-06-20)
-
-**Note:** Version bump only for package gatsby-plugin-emotion
-
-<a name="2.0.0-beta.1"></a>
-
-# [2.0.0-beta.1](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion/compare/[email protected]@2.0.0-beta.1) (2018-06-17)
-
-**Note:** Version bump only for package gatsby-plugin-emotion
-
-<a name="2.0.0-beta.0"></a>
-
-# [2.0.0-beta.0](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion/compare/[email protected]@2.0.0-beta.0) (2018-06-17)
-
-**Note:** Version bump only for package gatsby-plugin-emotion

packages/gatsby-plugin-emotion/README.md

@@ -1,28 +0,0 @@
-# gatsby-plugin-emotion
-
-Provide support for using the css-in-js library
-[Emotion](https://github.com/emotion-js/emotion) including server side
-rendering.
-
-## Install
-
-```
-npm install --save gatsby-plugin-emotion emotion emotion-server react-emotion
-```
-
-## How to use
-
-Add the plugin to your `gatsby-config.js`.
-
-```js
-module.exports = {
-  plugins: [
-    {
-      resolve: `gatsby-plugin-emotion`,
-      options: {
-        // Accepts all options defined by `babel-plugin-emotion` plugin.
-      },
-    },
-  ],
-}
-```

packages/gatsby-plugin-emotion/index.js

@@ -1 +0,0 @@
-// noop

packages/gatsby-plugin-emotion/package.json

@@ -7,7 +7,8 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.0.0"
+    "@babel/runtime": "^7.0.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0",
@@ -24,15 +25,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"
+  }
 }

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

@@ -1,5 +1,6 @@
 /* globals window */
 import { hydrate } from "emotion"
+import { wrapElement } from "./wrap-element"
 
 exports.onClientEntry = () => {
   if (
@@ -9,3 +10,5 @@ exports.onClientEntry = () => {
     hydrate(window.__EMOTION_CRITICAL_CSS_IDS__)
   }
 }
+
+exports.wrapRootElement = ({ element }) => wrapElement(element)

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

@@ -1,3 +1,5 @@
+const webpack = require(`webpack`)
+
 exports.onCreateBabelConfig = ({ actions }, pluginOptions) => {
   actions.setBabelPlugin({
     name: `babel-plugin-emotion`,
@@ -8,4 +10,21 @@ exports.onCreateBabelConfig = ({ actions }, pluginOptions) => {
       ...(pluginOptions ? pluginOptions : {}),
     },
   })
+
+  actions.setBabelPlugin({
+    name: `babel-plugin-transform-react-jsx`,
+    options: {
+      pragma: `Emotion.jsx`,
+    },
+  })
+}
+
+exports.onCreateWebpackConfig = ({ actions }) => {
+  actions.setWebpackConfig({
+    plugins: [
+      new webpack.ProvidePlugin({
+        Emotion: `@emotion/core`,
+      }),
+    ],
+  })
 }

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

@@ -2,12 +2,16 @@ import React from "react"
 import { renderToString } from "react-dom/server"
 import { extractCritical } from "emotion-server"
 
+import { wrapElement } from "./wrap-element"
+
 exports.replaceRenderer = ({
   bodyComponent,
   replaceBodyHTMLString,
   setHeadComponents,
 }) => {
-  const { html, ids, css } = extractCritical(renderToString(bodyComponent))
+  const { html, ids, css } = extractCritical(
+    renderToString(wrapElement(bodyComponent))
+  )
 
   const criticalStyle = <style dangerouslySetInnerHTML={{ __html: css }} />
   const criticalIds = (

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>
+)