diff --git a/docs/tutorial/part-four/index.md b/docs/tutorial/part-four/index.md index c37573552b26a..9700b6ad7c3c3 100644 --- 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 }) => (
( >

( @@ -292,7 +292,7 @@ Go ahead and add a `` 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 => (
( >

( diff --git a/examples/using-emotion/package.json b/examples/using-emotion/package.json index d0e305b674753..7806ec13513d3 100644 --- a/examples/using-emotion/package.json +++ b/examples/using-emotion/package.json @@ -4,8 +4,10 @@ "description": "Gatsby example site using using-emotion", "author": "Tegan Churchill ", "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", @@ -13,7 +15,6 @@ "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", @@ -21,6 +22,7 @@ "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 index b26aaa6542a4c..c801a6e29149f 100644 --- 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,11 +43,6 @@ const title = css` } ` -// Using css with object -const subtitle = css({ - color: `#bd93f9`, -}) - const IndexPage = () => ( @@ -64,16 +50,22 @@ const IndexPage = () => ( + -

+

Hello World, this is my first component styled with {` `} emotion!

-

+

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 index a8b9e890525bd..0c872804084ce 100644 --- 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 index 24145c975b448..eef37f23f0743 100644 --- 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 index ee251e75f0b98..1d49b98ccacdc 100644 --- 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 =