From 1ddaf0683ead56d907c44f76c69a514604bdfa43 Mon Sep 17 00:00:00 2001
From: Christian Alfoni <christianalfoni@gmail.com>
Date: Mon, 6 Jul 2020 08:52:43 +0200
Subject: [PATCH] update to new stitches version and api

---
 examples/with-stitches-styled/css/index.js    |  8 +++----
 examples/with-stitches-styled/package.json    |  4 ++--
 examples/with-stitches-styled/pages/_app.js   | 18 --------------
 .../with-stitches-styled/pages/_document.js   | 19 ++++++++-------
 examples/with-stitches-styled/pages/index.js  |  4 +++-
 examples/with-stitches/css/index.js           | 24 ++-----------------
 examples/with-stitches/package.json           |  2 +-
 examples/with-stitches/pages/_app.js          | 18 --------------
 examples/with-stitches/pages/_document.js     | 19 ++++++++-------
 examples/with-stitches/pages/index.js         | 13 +++++++---
 10 files changed, 42 insertions(+), 87 deletions(-)
 delete mode 100644 examples/with-stitches-styled/pages/_app.js
 delete mode 100644 examples/with-stitches/pages/_app.js

diff --git a/examples/with-stitches-styled/css/index.js b/examples/with-stitches-styled/css/index.js
index 2b6c855ed5529..57c9054635e0f 100644
--- a/examples/with-stitches-styled/css/index.js
+++ b/examples/with-stitches-styled/css/index.js
@@ -1,7 +1,7 @@
-import { createConfig } from '@stitches/css'
+import { createCss } from '@stitches/css'
 import { createStyled } from '@stitches/styled'
 
-const config = createConfig({
+export const css = createCss({
   tokens: {
     colors: {
       RED: 'tomato',
@@ -12,6 +12,4 @@ const config = createConfig({
   With Typescript:
   const { Provider, styled, useCss } = createStyled<typeof config>()  
 */
-const { Provider, styled, useCss } = createStyled()
-
-export { config, Provider, styled, useCss }
+export const styled = createStyled(css)
diff --git a/examples/with-stitches-styled/package.json b/examples/with-stitches-styled/package.json
index 9f7688677478b..f02cd6ad3cb8b 100644
--- a/examples/with-stitches-styled/package.json
+++ b/examples/with-stitches-styled/package.json
@@ -8,8 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@stitches/css": "2.0.6",
-    "@stitches/styled": "2.0.6",
+    "@stitches/css": "3.0.0",
+    "@stitches/styled": "3.0.0",
     "next": "9.3.5",
     "react": "16.13.1",
     "react-dom": "16.13.1"
diff --git a/examples/with-stitches-styled/pages/_app.js b/examples/with-stitches-styled/pages/_app.js
deleted file mode 100644
index 3a02350e7434f..0000000000000
--- a/examples/with-stitches-styled/pages/_app.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import App from 'next/app'
-import { createCss } from '@stitches/css'
-import { Provider, config } from '../css'
-
-/*
-  With Typescript:
-  export default class MyApp extends App<{ serverCss: TCss<typeof config> }> {
-*/
-export default class MyApp extends App {
-  render() {
-    const { Component, pageProps, serverCss } = this.props
-    return (
-      <Provider css={serverCss || createCss(config)}>
-        <Component {...pageProps} />
-      </Provider>
-    )
-  }
-}
diff --git a/examples/with-stitches-styled/pages/_document.js b/examples/with-stitches-styled/pages/_document.js
index 37446a385eae7..df3b228357357 100644
--- a/examples/with-stitches-styled/pages/_document.js
+++ b/examples/with-stitches-styled/pages/_document.js
@@ -1,25 +1,28 @@
 import Document from 'next/document'
-import { createCss } from '@stitches/css'
-import { config } from '../css'
+import { css } from '../css'
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const css = createCss(config)
     const originalRenderPage = ctx.renderPage
 
     try {
-      ctx.renderPage = () =>
-        originalRenderPage({
-          enhanceApp: (App) => (props) => <App {...props} serverCss={css} />,
-        })
+      let extractedStyles
+      ctx.renderPage = () => {
+        const { styles, result } = css.getStyles(originalRenderPage)
+        extractedStyles = styles
+        return result
+      }
 
       const initialProps = await Document.getInitialProps(ctx)
+
       return {
         ...initialProps,
         styles: (
           <>
             {initialProps.styles}
-            <style>{css.getStyles()}</style>
+            {extractedStyles.map((content) => (
+              <style>{content}</style>
+            ))}
           </>
         ),
       }
diff --git a/examples/with-stitches-styled/pages/index.js b/examples/with-stitches-styled/pages/index.js
index 139f87aa79be4..46a2e51a0daf8 100644
--- a/examples/with-stitches-styled/pages/index.js
+++ b/examples/with-stitches-styled/pages/index.js
@@ -1,6 +1,8 @@
 import { styled } from '../css'
 
-const Header = styled.h1((css) => css.color('RED'))
+const Header = styled.h1({
+  color: 'RED',
+})
 
 export default function Home() {
   return <Header>Hello world</Header>
diff --git a/examples/with-stitches/css/index.js b/examples/with-stitches/css/index.js
index 810d0e4bfa19d..655172700f519 100644
--- a/examples/with-stitches/css/index.js
+++ b/examples/with-stitches/css/index.js
@@ -1,30 +1,10 @@
-import { createConfig } from '@stitches/css'
+import { createCss } from '@stitches/css'
 import * as React from 'react'
 
-const config = createConfig({
+export const css = createCss({
   tokens: {
     colors: {
       RED: 'tomato',
     },
   },
 })
-
-/*
-  With Typescript:
-  const context = React.createContext<TCss<typeof config>>(null)
-*/
-const context = React.createContext(null)
-
-/*
-  With Typescript:
-  const Provider = ({ css, children }: { css: TCss<typeof config>, children?: React.ReactNode }) => {
-    return <context.Provider value={css}>{children}</context.Provider>
-  }
-*/
-const Provider = ({ css, children }) => {
-  return <context.Provider value={css}>{children}</context.Provider>
-}
-
-const useCss = () => React.useContext(context)
-
-export { config, Provider, useCss }
diff --git a/examples/with-stitches/package.json b/examples/with-stitches/package.json
index 0487dc2e090c9..761c06c9d5fb5 100644
--- a/examples/with-stitches/package.json
+++ b/examples/with-stitches/package.json
@@ -8,7 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@stitches/css": "2.0.6",
+    "@stitches/css": "3.0.0",
     "next": "9.3.5",
     "react": "16.13.1",
     "react-dom": "16.13.1"
diff --git a/examples/with-stitches/pages/_app.js b/examples/with-stitches/pages/_app.js
deleted file mode 100644
index 3b6955437658b..0000000000000
--- a/examples/with-stitches/pages/_app.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { createCss } from '@stitches/css'
-import App from 'next/app'
-import { config, Provider } from '../css'
-
-/*
-  With Typescript:
-  export default class MyApp extends App<{ serverCss: TCss<typeof config> }> {
-*/
-export default class MyApp extends App {
-  render() {
-    const { Component, pageProps, serverCss } = this.props
-    return (
-      <Provider css={serverCss || createCss(config)}>
-        <Component {...pageProps} />
-      </Provider>
-    )
-  }
-}
diff --git a/examples/with-stitches/pages/_document.js b/examples/with-stitches/pages/_document.js
index 5de659632367e..df3b228357357 100644
--- a/examples/with-stitches/pages/_document.js
+++ b/examples/with-stitches/pages/_document.js
@@ -1,26 +1,27 @@
-import { createCss } from '@stitches/css'
 import Document from 'next/document'
-import { config } from '../css'
+import { css } from '../css'
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const css = createCss(config)
     const originalRenderPage = ctx.renderPage
 
     try {
-      ctx.renderPage = () =>
-        originalRenderPage({
-          enhanceApp: (App) => (props) => <App {...props} serverCss={css} />,
-        })
+      let extractedStyles
+      ctx.renderPage = () => {
+        const { styles, result } = css.getStyles(originalRenderPage)
+        extractedStyles = styles
+        return result
+      }
 
       const initialProps = await Document.getInitialProps(ctx)
+
       return {
         ...initialProps,
         styles: (
           <>
             {initialProps.styles}
-            {css.getStyles().map((css, index) => (
-              <style key={index}>{css}</style>
+            {extractedStyles.map((content) => (
+              <style>{content}</style>
             ))}
           </>
         ),
diff --git a/examples/with-stitches/pages/index.js b/examples/with-stitches/pages/index.js
index aac79783121e0..039130840e4d4 100644
--- a/examples/with-stitches/pages/index.js
+++ b/examples/with-stitches/pages/index.js
@@ -1,6 +1,13 @@
-import { useCss } from '../css'
+import { css } from '../css'
 
 export default function Home() {
-  const css = useCss()
-  return <h1 className={css.color('RED')}>Hello world</h1>
+  return (
+    <h1
+      className={css({
+        color: 'RED',
+      })}
+    >
+      Hello world
+    </h1>
+  )
 }