[with-emotion-10,11] Update emotion examples to v10 & v11 (#9646)

* Update emotion to v10, use @emotion/core, @emotion/styled * Add with-emotion-11 and make review changes * Fix package names and run prettier * fix readmes Co-authored-by: Joe Haddad <timer150@gmail.com>
vercel · Jan 20, 2020 · b72b8e2 · b72b8e2
1 parent 7a728d6
commit b72b8e2
Show file tree

Hide file tree

Showing 14 changed files with 256 additions and 63 deletions.
diff --git a/examples/with-emotion-10/README.md b/examples/with-emotion-10/README.md
@@ -0,0 +1,50 @@
+# Pass Server Data Directly to a Next.js Page during SSR
+
+Extract and inline critical css with
+[emotion](https://github.com/emotion-js/emotion/tree/master/packages/emotion),
+[emotion-server](https://github.com/emotion-js/emotion/tree/master/packages/emotion-server),
+[@emotion/core](https://github.com/emotion-js/emotion/tree/master/packages/core),
+and [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled).
+
+## Deploy your own
+
+Deploy the example using [ZEIT Now](https://zeit.co/now):
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-emotion-10)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npm init next-app --example with-emotion-10 with-emotion-10-app
+# or
+yarn create next-app --example with-emotion-10 with-emotion-10-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-emotion-10
+cd with-emotion-10
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
+
+```bash
+now
+```
diff --git a/examples/with-emotion-fiber/package.json → examples/with-emotion-10/package.json b/examples/with-emotion-fiber/package.json → examples/with-emotion-10/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "with-emotion-fiber",
+  "name": "with-emotion-10",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
@@ -12,11 +12,12 @@
   "author": "Thomas Greco",
   "license": "ISC",
   "dependencies": {
-    "emotion": "^8.0.11",
-    "emotion-server": "^8.0.11",
+    "@emotion/core": "10.0.27",
+    "@emotion/styled": "10.0.27",
+    "emotion": "10.0.27",
+    "emotion-server": "10.0.27",
     "next": "latest",
     "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-emotion": "^8.0.11"
+    "react-dom": "^16.7.0"
   }
 }
diff --git a/examples/with-emotion-10/pages/_app.js b/examples/with-emotion-10/pages/_app.js
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import NextApp from 'next/app'
+import { CacheProvider } from '@emotion/core'
+
+// Use only { cache } from 'emotion'. Don't use { css }.
+import { cache } from 'emotion'
+
+import { globalStyles } from '../shared/styles'
+
+export default class App extends NextApp {
+  render() {
+    const { Component, pageProps } = this.props
+    return (
+      <CacheProvider value={cache}>
+        {globalStyles}
+        <Component {...pageProps} />
+      </CacheProvider>
+    )
+  }
+}
diff --git a/...les/with-emotion-fiber/pages/_document.js → examples/with-emotion-10/pages/_document.js b/...les/with-emotion-fiber/pages/_document.js → examples/with-emotion-10/pages/_document.js
@@ -8,19 +8,14 @@ export default class MyDocument extends Document {
     return { ...page, ...styles }
   }
 
-  constructor(props) {
-    super(props)
-    const { __NEXT_DATA__, ids } = props
-    if (ids) {
-      __NEXT_DATA__.ids = ids
-    }
-  }
-
   render() {
     return (
       <html>
         <Head>
-          <style dangerouslySetInnerHTML={{ __html: this.props.css }} />
+          <style
+            data-emotion-css={this.props.ids.join(' ')}
+            dangerouslySetInnerHTML={{ __html: this.props.css }}
+          />
         </Head>
         <body>
           <Main />

diff --git a/...-emotion-fiber/features/home.component.js → examples/with-emotion-10/pages/index.js b/...-emotion-fiber/features/home.component.js → examples/with-emotion-10/pages/index.js
diff --git a/examples/with-emotion-fiber/shared/styles.js → examples/with-emotion-10/shared/styles.js b/examples/with-emotion-fiber/shared/styles.js → examples/with-emotion-10/shared/styles.js
@@ -1,15 +1,21 @@
-import styled, { keyframes, css, injectGlobal } from 'react-emotion'
+import { keyframes, css, Global } from '@emotion/core'
+import styled from '@emotion/styled'
 
-export const injectGlobalStyles = () => injectGlobal`
-html, body {
-  padding: 3rem 1rem;
-  margin: 0;
-  background: papayawhip;
-  min-height: 100%;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 24px;
-}
-`
+export const globalStyles = (
+  <Global
+    styles={css`
+      html,
+      body {
+        padding: 3rem 1rem;
+        margin: 0;
+        background: papayawhip;
+        min-height: 100%;
+        font-family: Helvetica, Arial, sans-serif;
+        font-size: 24px;
+      }
+    `}
+  />
+)
 
 export const basicStyles = css`
   background-color: white;
@@ -32,12 +38,12 @@ export const hoverStyles = css`
   }
 `
 export const bounce = keyframes`
-from {
-transform: scale(1.01);
-}
-to {
-transform: scale(0.99);
-}
+  from {
+    transform: scale(1.01);
+  }
+  to {
+    transform: scale(0.99);
+  }
 `
 
 export const Basic = styled('div')`

diff --git a/examples/with-emotion-fiber/README.md → examples/with-emotion-11/README.md b/examples/with-emotion-fiber/README.md → examples/with-emotion-11/README.md
@@ -1,12 +1,12 @@
 # Pass Server Data Directly to a Next.js Page during SSR
 
-Extract and inline critical css with [emotion](https://github.com/emotion-js/emotion) using [emotion-server](https://github.com/emotion-js/emotion/tree/master/packages/emotion-server) and [react-emotion](https://github.com/emotion-js/emotion/tree/master/packages/react-emotion).
+Extract and inline critical css with [@emotion/react](https://www.npmjs.com/package/@emotion/react) and [@emotion/styled](https://www.npmjs.com/package/@emotion/styled)
 
 ## Deploy your own
 
 Deploy the example using [ZEIT Now](https://zeit.co/now):
 
-[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-emotion-fiber)
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-emotion-11)
 
 ## How to use
 
@@ -15,18 +15,18 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
 Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
-npm init next-app --example with-emotion-fiber with-emotion-fiber-app
+npm init next-app --example with-emotion-11 with-emotion-11-app
 # or
-yarn create next-app --example with-emotion-fiber with-emotion-fiber-app
+yarn create next-app --example with-emotion-11 with-emotion-11-app
 ```
 
 ### Download manually
 
 Download the example:
 
 ```bash
-curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-emotion-fiber
-cd with-emotion-fiber
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-emotion-11
+cd with-emotion-11
 ```
 
 Install it and run:

diff --git a/examples/with-emotion-11/package.json b/examples/with-emotion-11/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "with-emotion-11",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "keywords": [],
+  "author": "Thomas Greco",
+  "license": "ISC",
+  "dependencies": {
+    "@emotion/cache": "11.0.0-next.10",
+    "@emotion/css": "11.0.0-next.10",
+    "@emotion/react": "11.0.0-next.10",
+    "@emotion/server": "11.0.0-next.10",
+    "@emotion/styled": "11.0.0-next.10",
+    "next": "latest",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  }
+}
diff --git a/examples/with-emotion-11/pages/_app.js b/examples/with-emotion-11/pages/_app.js
@@ -0,0 +1,17 @@
+import * as React from 'react'
+import NextApp from 'next/app'
+import { CacheProvider } from '@emotion/react'
+import { cache } from '@emotion/css'
+import { globalStyles } from '../shared/styles'
+
+export default class App extends NextApp {
+  render() {
+    const { Component, pageProps } = this.props
+    return (
+      <CacheProvider value={cache}>
+        {globalStyles}
+        <Component {...pageProps} />
+      </CacheProvider>
+    )
+  }
+}
diff --git a/examples/with-emotion-11/pages/_document.js b/examples/with-emotion-11/pages/_document.js
@@ -0,0 +1,27 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+import { extractCritical } from '@emotion/server'
+
+export default class MyDocument extends Document {
+  static getInitialProps({ renderPage }) {
+    const page = renderPage()
+    const styles = extractCritical(page.html)
+    return { ...page, ...styles }
+  }
+
+  render() {
+    return (
+      <html>
+        <Head>
+          <style
+            data-emotion-css={this.props.ids.join(' ')}
+            dangerouslySetInnerHTML={{ __html: this.props.css }}
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/examples/with-emotion-11/pages/index.js b/examples/with-emotion-11/pages/index.js
@@ -0,0 +1,12 @@
+import { Basic, Combined, Animated, bounce } from '../shared/styles'
+const Home = () => (
+  <div>
+    <Basic>Cool Styles</Basic>
+    <Combined>
+      With <code>:hover</code>.
+    </Combined>
+    <Animated animation={bounce}>Let's bounce.</Animated>
+  </div>
+)
+
+export default Home
diff --git a/examples/with-emotion-11/shared/styles.js b/examples/with-emotion-11/shared/styles.js
@@ -0,0 +1,67 @@
+import { keyframes, css, Global } from '@emotion/react'
+import styled from '@emotion/styled'
+
+export const globalStyles = (
+  <Global
+    styles={css`
+      html,
+      body {
+        padding: 3rem 1rem;
+        margin: 0;
+        background: papayawhip;
+        min-height: 100%;
+        font-family: Helvetica, Arial, sans-serif;
+        font-size: 24px;
+      }
+    `}
+  />
+)
+
+export const basicStyles = css`
+  background-color: white;
+  color: cornflowerblue;
+  border: 1px solid lightgreen;
+  border-right: none;
+  border-bottom: none;
+  box-shadow: 5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow;
+  transition: all 0.1s linear;
+  margin: 3rem 0;
+  padding: 1rem 0.5rem;
+`
+
+export const hoverStyles = css`
+  &:hover {
+    color: white;
+    background-color: lightgray;
+    border-color: aqua;
+    box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
+  }
+`
+export const bounce = keyframes`
+  from {
+    transform: scale(1.01);
+  }
+  to {
+    transform: scale(0.99);
+  }
+`
+
+export const Basic = styled('div')`
+  ${basicStyles};
+`
+
+export const Combined = styled('div')`
+  ${basicStyles};
+  ${hoverStyles};
+  & code {
+    background-color: linen;
+  }
+`
+export const Animated = styled('div')`
+  ${basicStyles};
+  ${hoverStyles};
+  & code {
+    background-color: linen;
+  }
+  animation: ${props => props.animation} 0.2s infinite ease-in-out alternate;
+`
diff --git a/examples/with-emotion-fiber/hoc/withEmotion.component.js b/examples/with-emotion-fiber/hoc/withEmotion.component.js
diff --git a/examples/with-emotion-fiber/pages/index.js b/examples/with-emotion-fiber/pages/index.js