From a21fd774a07549efed5ffb91101362990fab73f3 Mon Sep 17 00:00:00 2001
From: MMT-LD <liam.davers.work@gmail.com>
Date: Wed, 16 Dec 2020 11:35:08 +0000
Subject: [PATCH 1/9] feature/vanilla-emotion - add an example of vanilla
 emotion

---
 examples/with-emotion-vanilla/.gitignore      |  34 ++++++
 examples/with-emotion-vanilla/README.md       |  24 +++++
 examples/with-emotion-vanilla/package.json    |  17 +++
 examples/with-emotion-vanilla/pages/_app.js   |  20 ++++
 .../with-emotion-vanilla/pages/_document.js   |  39 +++++++
 examples/with-emotion-vanilla/pages/index.js  |  30 ++++++
 .../with-emotion-vanilla/shared/emotion.js    |  12 +++
 .../with-emotion-vanilla/shared/renderer.js   |  13 +++
 .../with-emotion-vanilla/shared/styles.js     | 102 ++++++++++++++++++
 9 files changed, 291 insertions(+)
 create mode 100644 examples/with-emotion-vanilla/.gitignore
 create mode 100644 examples/with-emotion-vanilla/README.md
 create mode 100644 examples/with-emotion-vanilla/package.json
 create mode 100644 examples/with-emotion-vanilla/pages/_app.js
 create mode 100644 examples/with-emotion-vanilla/pages/_document.js
 create mode 100644 examples/with-emotion-vanilla/pages/index.js
 create mode 100644 examples/with-emotion-vanilla/shared/emotion.js
 create mode 100644 examples/with-emotion-vanilla/shared/renderer.js
 create mode 100644 examples/with-emotion-vanilla/shared/styles.js

diff --git a/examples/with-emotion-vanilla/.gitignore b/examples/with-emotion-vanilla/.gitignore
new file mode 100644
index 0000000000000..1437c53f70bc2
--- /dev/null
+++ b/examples/with-emotion-vanilla/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/examples/with-emotion-vanilla/README.md b/examples/with-emotion-vanilla/README.md
new file mode 100644
index 0000000000000..f43e633dfc36b
--- /dev/null
+++ b/examples/with-emotion-vanilla/README.md
@@ -0,0 +1,24 @@
+# Emotion Vanilla Example
+
+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/server),
+[@emotion/css](https://github.com/emotion-js/emotion/tree/master/packages/css)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-emotion-vanilla)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/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
+npx create-next-app --example with-emotion-vanilla with-emotion-vanilla-app
+# or
+yarn create next-app --example with-emotion-vanilla with-emotion-vanilla-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-emotion-vanilla/package.json b/examples/with-emotion-vanilla/package.json
new file mode 100644
index 0000000000000..1c16666bcf915
--- /dev/null
+++ b/examples/with-emotion-vanilla/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "with-emotion-vanilla",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@emotion/css": "11.0.0",
+    "@emotion/server": "11.0.0",
+    "next": "latest",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  }
+}
diff --git a/examples/with-emotion-vanilla/pages/_app.js b/examples/with-emotion-vanilla/pages/_app.js
new file mode 100644
index 0000000000000..6cfdd2424520f
--- /dev/null
+++ b/examples/with-emotion-vanilla/pages/_app.js
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { hydrate } from '../shared/emotion'
+
+// Adds server generated styles to emotion cache.
+// this needs to come before the app mounts
+// We use query selector here as setting on window results in emotion error `Cannot read property 'forEach' of undefined`
+if (typeof window !== 'undefined') {
+  const ids = JSON.parse(
+    document
+      .querySelector('[data-emotion-ssr]')
+      .getAttribute('data-emotion-ssr')
+  )
+  hydrate(ids)
+}
+
+const App = ({ Component, pageProps }) => {
+  return <Component {...pageProps} />
+}
+
+export default App
diff --git a/examples/with-emotion-vanilla/pages/_document.js b/examples/with-emotion-vanilla/pages/_document.js
new file mode 100644
index 0000000000000..1f0a2e761ac34
--- /dev/null
+++ b/examples/with-emotion-vanilla/pages/_document.js
@@ -0,0 +1,39 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import * as React from 'react'
+import { renderStatic } from '../shared/renderer'
+
+// Please note: - the reason for data-emotion-ssr={JSON.stringify(ids)} is because
+// hydrate can't find the ids if we set them using window.__ids
+// adding this and looking for it in _app.js allows it to always be ready so we just parse that attribute to get the ids array
+export default class AppDocument extends Document {
+  static async getInitialProps(ctx) {
+    const page = await ctx.renderPage()
+    const { css, ids } = await renderStatic(() => page.html)
+    const initialProps = await Document.getInitialProps(ctx)
+    return {
+      ...initialProps,
+      styles: (
+        <React.Fragment>
+          {initialProps.styles}
+          <style
+            data-emotion-css={ids.join(' ')}
+            data-emotion-ssr={JSON.stringify(ids)}
+            dangerouslySetInnerHTML={{ __html: css }}
+          />
+        </React.Fragment>
+      ),
+    }
+  }
+
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/examples/with-emotion-vanilla/pages/index.js b/examples/with-emotion-vanilla/pages/index.js
new file mode 100644
index 0000000000000..0c3c7b014d2c5
--- /dev/null
+++ b/examples/with-emotion-vanilla/pages/index.js
@@ -0,0 +1,30 @@
+import Head from 'next/head'
+import {
+  basicStyles,
+  otherStyles,
+  someMoreBasicStyles,
+  someCssAsObject,
+  combinedAsArray,
+  cxExample,
+  keyframesExample,
+} from '../shared/styles'
+
+const Home = () => (
+  <>
+    <Head>
+      <title>Emotion using the vanilla version supporting SSR</title>
+    </Head>
+    <div>
+      <h1>Emotion Vanilla example</h1>
+      <div className={basicStyles}>Basic styles using emotion</div>
+      <div className={otherStyles}>Some more styles using emotion</div>
+      <div className={someMoreBasicStyles}>Well why not here is some more</div>
+      <div className={someCssAsObject}>Object styles using emotion css</div>
+      <div className={combinedAsArray}>Array of styles using emotion css</div>
+      <div className={cxExample}>cx example from emotion</div>
+      <div className={keyframesExample} />
+    </div>
+  </>
+)
+
+export default Home
diff --git a/examples/with-emotion-vanilla/shared/emotion.js b/examples/with-emotion-vanilla/shared/emotion.js
new file mode 100644
index 0000000000000..048daa52af1c0
--- /dev/null
+++ b/examples/with-emotion-vanilla/shared/emotion.js
@@ -0,0 +1,12 @@
+import createEmotion from '@emotion/css/create-instance'
+
+export const {
+  flush,
+  hydrate,
+  injectGlobal,
+  keyframes,
+  cx,
+  css,
+  cache,
+  sheet,
+} = createEmotion({ key: 'css-custom' })
diff --git a/examples/with-emotion-vanilla/shared/renderer.js b/examples/with-emotion-vanilla/shared/renderer.js
new file mode 100644
index 0000000000000..09300af6422e5
--- /dev/null
+++ b/examples/with-emotion-vanilla/shared/renderer.js
@@ -0,0 +1,13 @@
+import createEmotionServer from '@emotion/server/create-instance'
+import { cache } from './emotion'
+
+export const renderStatic = async (callback) => {
+  const html = callback()
+  if (html === undefined) {
+    throw new Error('did you forget to return html from renderToString?')
+  }
+  const { extractCritical } = createEmotionServer(cache)
+  const { ids, css } = extractCritical(html)
+
+  return { html, ids, css }
+}
diff --git a/examples/with-emotion-vanilla/shared/styles.js b/examples/with-emotion-vanilla/shared/styles.js
new file mode 100644
index 0000000000000..608c2083cba7b
--- /dev/null
+++ b/examples/with-emotion-vanilla/shared/styles.js
@@ -0,0 +1,102 @@
+import { css, cx, keyframes, injectGlobal } from './emotion'
+
+injectGlobal`
+  * {
+    box-sizing: border-box;
+  }
+  body {
+    background: #DFCFBE;
+    font-family: Helvetica, sans-serif;
+  }
+`
+
+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;
+`
+
+const otherStyles = css`
+  background-color: red;
+  padding: 10px;
+  margin-bottom: 10px;
+`
+
+const someMoreBasicStyles = css`
+  background-color: green;
+  color: white;
+  margin-bottom: 10px;
+  padding: 10px;
+`
+
+const someCssAsObject = css({
+  background: 'orange',
+  color: 'white',
+  padding: '10px',
+  marginBottom: '10px',
+})
+
+const combinedAsArray = css([someMoreBasicStyles, someCssAsObject])
+
+const cls1 = css`
+  font-size: 20px;
+  padding: 5px;
+  background: green;
+  color: orange;
+`
+const cls2 = css`
+  font-size: 20px;
+  padding: 15px;
+  background: blue;
+  color: white;
+`
+
+const cxExample = cx(cls1, cls2)
+
+const bounce = keyframes`
+  from, 20%, 53%, 80%, to {
+    transform: translate3d(0,0,0);
+  }
+
+  40%, 43% {
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    transform: translate3d(0,-4px,0);
+  }
+`
+
+const keyframesExample = css([
+  bounce,
+  css({
+    marginTop: '50px',
+    width: '20px',
+    height: '20px',
+    background: 'black',
+    borderRadius: '50%',
+    padding: '20px',
+    animation: `${bounce} 1s ease infinite`,
+    transformOrigin: 'center',
+  }),
+])
+
+export {
+  combinedAsArray,
+  cxExample,
+  keyframesExample,
+  someCssAsObject,
+  someMoreBasicStyles,
+  otherStyles,
+  basicStyles,
+}

From 225f6c2a81b803443c37b45c72e279bdab227b9b Mon Sep 17 00:00:00 2001
From: MMT-LD <liam.davers.work@gmail.com>
Date: Wed, 16 Dec 2020 22:32:15 +0000
Subject: [PATCH 2/9] feature/vanilla-emotion - remove custom cache approach
 and use @emotion packages directly

---
 examples/with-emotion-vanilla/.babelrc           |  4 ++++
 examples/with-emotion-vanilla/package.json       |  3 +++
 examples/with-emotion-vanilla/pages/_app.js      |  2 +-
 examples/with-emotion-vanilla/shared/emotion.js  | 12 ------------
 examples/with-emotion-vanilla/shared/renderer.js |  2 +-
 examples/with-emotion-vanilla/shared/styles.js   |  2 +-
 6 files changed, 10 insertions(+), 15 deletions(-)
 create mode 100644 examples/with-emotion-vanilla/.babelrc
 delete mode 100644 examples/with-emotion-vanilla/shared/emotion.js

diff --git a/examples/with-emotion-vanilla/.babelrc b/examples/with-emotion-vanilla/.babelrc
new file mode 100644
index 0000000000000..d69237b3888a2
--- /dev/null
+++ b/examples/with-emotion-vanilla/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": [["next/babel"]],
+  "plugins": ["@emotion/babel-plugin"]
+}
diff --git a/examples/with-emotion-vanilla/package.json b/examples/with-emotion-vanilla/package.json
index 1c16666bcf915..4d271b1761be4 100644
--- a/examples/with-emotion-vanilla/package.json
+++ b/examples/with-emotion-vanilla/package.json
@@ -7,6 +7,9 @@
     "start": "next start"
   },
   "license": "MIT",
+  "devDependencies": {
+    "@emotion/babel-plugin": "11.0.0"
+  },
   "dependencies": {
     "@emotion/css": "11.0.0",
     "@emotion/server": "11.0.0",
diff --git a/examples/with-emotion-vanilla/pages/_app.js b/examples/with-emotion-vanilla/pages/_app.js
index 6cfdd2424520f..5834931cc066b 100644
--- a/examples/with-emotion-vanilla/pages/_app.js
+++ b/examples/with-emotion-vanilla/pages/_app.js
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { hydrate } from '../shared/emotion'
+import { hydrate } from '@emotion/css'
 
 // Adds server generated styles to emotion cache.
 // this needs to come before the app mounts
diff --git a/examples/with-emotion-vanilla/shared/emotion.js b/examples/with-emotion-vanilla/shared/emotion.js
deleted file mode 100644
index 048daa52af1c0..0000000000000
--- a/examples/with-emotion-vanilla/shared/emotion.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import createEmotion from '@emotion/css/create-instance'
-
-export const {
-  flush,
-  hydrate,
-  injectGlobal,
-  keyframes,
-  cx,
-  css,
-  cache,
-  sheet,
-} = createEmotion({ key: 'css-custom' })
diff --git a/examples/with-emotion-vanilla/shared/renderer.js b/examples/with-emotion-vanilla/shared/renderer.js
index 09300af6422e5..e71f021514403 100644
--- a/examples/with-emotion-vanilla/shared/renderer.js
+++ b/examples/with-emotion-vanilla/shared/renderer.js
@@ -1,5 +1,5 @@
 import createEmotionServer from '@emotion/server/create-instance'
-import { cache } from './emotion'
+import { cache } from '@emotion/css'
 
 export const renderStatic = async (callback) => {
   const html = callback()
diff --git a/examples/with-emotion-vanilla/shared/styles.js b/examples/with-emotion-vanilla/shared/styles.js
index 608c2083cba7b..c2562c032f844 100644
--- a/examples/with-emotion-vanilla/shared/styles.js
+++ b/examples/with-emotion-vanilla/shared/styles.js
@@ -1,4 +1,4 @@
-import { css, cx, keyframes, injectGlobal } from './emotion'
+import { css, cx, keyframes, injectGlobal } from '@emotion/css'
 
 injectGlobal`
   * {

From 744b3c50103a720eb1321c02ed16fb8894f0d9b5 Mon Sep 17 00:00:00 2001
From: MMT-LD <28092872+MMT-LD@users.noreply.github.com>
Date: Sun, 20 Dec 2020 19:21:14 +0000
Subject: [PATCH 3/9] Update examples/with-emotion-vanilla/pages/_document.js
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
---
 examples/with-emotion-vanilla/pages/_document.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/examples/with-emotion-vanilla/pages/_document.js b/examples/with-emotion-vanilla/pages/_document.js
index 1f0a2e761ac34..5208c8c97b595 100644
--- a/examples/with-emotion-vanilla/pages/_document.js
+++ b/examples/with-emotion-vanilla/pages/_document.js
@@ -16,8 +16,7 @@ export default class AppDocument extends Document {
         <React.Fragment>
           {initialProps.styles}
           <style
-            data-emotion-css={ids.join(' ')}
-            data-emotion-ssr={JSON.stringify(ids)}
+            data-emotion={`css ${ids.join(' ')}`}
             dangerouslySetInnerHTML={{ __html: css }}
           />
         </React.Fragment>

From 81b1c8b19940433bea959ebae89bbbe0a7d39eea Mon Sep 17 00:00:00 2001
From: MMT-LD <liam.davers.work@gmail.com>
Date: Sun, 20 Dec 2020 19:25:01 +0000
Subject: [PATCH 4/9] feature/vanilla-emotion - fixes to pr based on comments

---
 examples/with-emotion-vanilla/pages/_app.js      | 15 ---------------
 examples/with-emotion-vanilla/pages/_document.js |  4 ----
 2 files changed, 19 deletions(-)

diff --git a/examples/with-emotion-vanilla/pages/_app.js b/examples/with-emotion-vanilla/pages/_app.js
index 5834931cc066b..f2c141092d499 100644
--- a/examples/with-emotion-vanilla/pages/_app.js
+++ b/examples/with-emotion-vanilla/pages/_app.js
@@ -1,18 +1,3 @@
-import * as React from 'react'
-import { hydrate } from '@emotion/css'
-
-// Adds server generated styles to emotion cache.
-// this needs to come before the app mounts
-// We use query selector here as setting on window results in emotion error `Cannot read property 'forEach' of undefined`
-if (typeof window !== 'undefined') {
-  const ids = JSON.parse(
-    document
-      .querySelector('[data-emotion-ssr]')
-      .getAttribute('data-emotion-ssr')
-  )
-  hydrate(ids)
-}
-
 const App = ({ Component, pageProps }) => {
   return <Component {...pageProps} />
 }
diff --git a/examples/with-emotion-vanilla/pages/_document.js b/examples/with-emotion-vanilla/pages/_document.js
index 5208c8c97b595..f4538934e6d00 100644
--- a/examples/with-emotion-vanilla/pages/_document.js
+++ b/examples/with-emotion-vanilla/pages/_document.js
@@ -1,10 +1,6 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 import * as React from 'react'
 import { renderStatic } from '../shared/renderer'
-
-// Please note: - the reason for data-emotion-ssr={JSON.stringify(ids)} is because
-// hydrate can't find the ids if we set them using window.__ids
-// adding this and looking for it in _app.js allows it to always be ready so we just parse that attribute to get the ids array
 export default class AppDocument extends Document {
   static async getInitialProps(ctx) {
     const page = await ctx.renderPage()

From 6cfe0954f57cfd7c4d33fdfd10df730ee3704b63 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Fri, 22 Jan 2021 11:51:43 +0100
Subject: [PATCH 5/9] Delete _app.js

---
 examples/with-emotion-vanilla/pages/_app.js | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 examples/with-emotion-vanilla/pages/_app.js

diff --git a/examples/with-emotion-vanilla/pages/_app.js b/examples/with-emotion-vanilla/pages/_app.js
deleted file mode 100644
index f2c141092d499..0000000000000
--- a/examples/with-emotion-vanilla/pages/_app.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const App = ({ Component, pageProps }) => {
-  return <Component {...pageProps} />
-}
-
-export default App

From 71376a97d9c5448a4475221a6e60173d06f8174d Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Fri, 22 Jan 2021 11:53:15 +0100
Subject: [PATCH 6/9] Update examples/with-emotion-vanilla/pages/_document.js

---
 examples/with-emotion-vanilla/pages/_document.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/with-emotion-vanilla/pages/_document.js b/examples/with-emotion-vanilla/pages/_document.js
index f4538934e6d00..5fc059fbdecf4 100644
--- a/examples/with-emotion-vanilla/pages/_document.js
+++ b/examples/with-emotion-vanilla/pages/_document.js
@@ -22,7 +22,7 @@ export default class AppDocument extends Document {
 
   render() {
     return (
-      <Html lang="en">
+      <Html>
         <Head />
         <body>
           <Main />

From 579ff02c8c9ff3f1b5be270ad56eb242c4cf7c57 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Fri, 22 Jan 2021 11:54:03 +0100
Subject: [PATCH 7/9] Update examples/with-emotion-vanilla/pages/_document.js

---
 examples/with-emotion-vanilla/pages/_document.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/with-emotion-vanilla/pages/_document.js b/examples/with-emotion-vanilla/pages/_document.js
index 5fc059fbdecf4..e34725067736d 100644
--- a/examples/with-emotion-vanilla/pages/_document.js
+++ b/examples/with-emotion-vanilla/pages/_document.js
@@ -4,7 +4,7 @@ import { renderStatic } from '../shared/renderer'
 export default class AppDocument extends Document {
   static async getInitialProps(ctx) {
     const page = await ctx.renderPage()
-    const { css, ids } = await renderStatic(() => page.html)
+    const { css, ids } = await renderStatic(page.html)
     const initialProps = await Document.getInitialProps(ctx)
     return {
       ...initialProps,

From 00f3899bfce8d57d60a47fd0349245f08142c924 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Fri, 22 Jan 2021 11:54:23 +0100
Subject: [PATCH 8/9] Update examples/with-emotion-vanilla/shared/renderer.js

---
 examples/with-emotion-vanilla/shared/renderer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/with-emotion-vanilla/shared/renderer.js b/examples/with-emotion-vanilla/shared/renderer.js
index e71f021514403..ca9f16e04731a 100644
--- a/examples/with-emotion-vanilla/shared/renderer.js
+++ b/examples/with-emotion-vanilla/shared/renderer.js
@@ -1,7 +1,7 @@
 import createEmotionServer from '@emotion/server/create-instance'
 import { cache } from '@emotion/css'
 
-export const renderStatic = async (callback) => {
+export const renderStatic = async (html) => {
   const html = callback()
   if (html === undefined) {
     throw new Error('did you forget to return html from renderToString?')

From ec7c02e14880299e30e6fab3cac01a125260d159 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Fri, 22 Jan 2021 11:54:48 +0100
Subject: [PATCH 9/9] Update examples/with-emotion-vanilla/shared/renderer.js

---
 examples/with-emotion-vanilla/shared/renderer.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/with-emotion-vanilla/shared/renderer.js b/examples/with-emotion-vanilla/shared/renderer.js
index ca9f16e04731a..6865f1adea2ef 100644
--- a/examples/with-emotion-vanilla/shared/renderer.js
+++ b/examples/with-emotion-vanilla/shared/renderer.js
@@ -2,7 +2,6 @@ import createEmotionServer from '@emotion/server/create-instance'
 import { cache } from '@emotion/css'
 
 export const renderStatic = async (html) => {
-  const html = callback()
   if (html === undefined) {
     throw new Error('did you forget to return html from renderToString?')
   }