Update example: update to new stitches version and api (#14876)

examples/with-stitches-styled/css/index.js

-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',
     },
   },
 })
-/*
-  With Typescript:
-  const { Provider, styled, useCss } = createStyled<typeof config>()  
-*/
-const { Provider, styled, useCss } = createStyled()
 
-export { config, Provider, styled, useCss }
+export const styled = createStyled(css)

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"

examples/with-stitches-styled/pages/_app.js

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

examples/with-stitches-styled/pages/_document.js

 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>
+            ))}
           </>
         ),
       }

examples/with-stitches-styled/pages/index.js

 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>

examples/with-stitches/css/index.js

-import { createConfig } from '@stitches/css'
-import * as React from 'react'
+import { createCss } from '@stitches/css'
 
-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 }

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"

examples/with-stitches/pages/_app.js

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

examples/with-stitches/pages/_document.js

-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>
             ))}
           </>
         ),

examples/with-stitches/pages/index.js

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