With stitches (#12677)

split into two examples

examples/with-stitches-styled/README.md

+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/zeit/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on ZEIT Now
+
+The easiest way to deploy your Next.js app is to use the [ZEIT Now Platform](https://zeit.co/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/with-stitches-styled/package.json

+{
+  "name": "with-stitches-styled",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@stitches/css": "2.0.6",
+    "@stitches/styled": "2.0.6",
+    "next": "9.3.5",
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.34",
+    "typescript": "^3.8.3"
+  }
+}

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

+import App from 'next/app'
+import React from 'react'
+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'
+
+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} />,
+        })
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            <style>{css.getStyles()}</style>
+          </>
+        ),
+      }
+    } finally {
+    }
+  }
+}

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

+import { styled } from '../css'
+
+const Header = styled.h1((css) => css.color('RED'))
+
+export default function Home() {
+  return <Header>Hello world</Header>
+}

examples/with-stitches-styled/public/zeit.svg

+<svg width="82" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill="url(#prefix__paint0_linear)" d="M9.018 0l9.019 16H0L9.018 0z"/>
+    <path fill="#333" fill-rule="evenodd" d="M51.634 12.028h-6.492V2.052h6.492v1.256H46.61v3.007h4.37V7.57h-4.37v3.202h5.024v1.255zm-14.063 0h-7.235v-1.096l5.342-7.624h-5.253V2.052h7.058v1.097l-5.342 7.623h5.43v1.256zm21.88 0h6.333v-1.256h-2.423V3.308h2.423V2.052h-6.332v1.256h2.441v7.465h-2.441v1.255zm18.22 0h-1.468v-8.72h-3.36V2.052h8.225v1.256H77.67v8.72z" clip-rule="evenodd"/>
+    <defs>
+        <linearGradient id="prefix__paint0_linear" x1="28.022" x2="16.189" y1="22.991" y2="8.569" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#fff"/>
+            <stop offset="1"/>
+        </linearGradient>
+    </defs>
+</svg>

examples/with-stitches/css/index.js

+import { createConfig } from '@stitches/css'
+import * as React from 'react'
+
+const config = createConfig({
+  tokens: {
+    colors: {
+      RED: 'tomato',
+    },
+  },
+})
+
+/*
+  With Typescript:
+  const context = React.createContext<TCss<typeof config>>(null)
+*/
+const context = React.createContext(null)
+
+/*
+  With Typescript:
+  const Provider: React.FC<{ css: TCss<typeof config> }> = ({ css, children }) => {
+    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,8 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@stitches/css": "1.6.1",
-    "@stitches/styled": "1.6.1",
+    "@stitches/css": "2.0.6",
     "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 React from 'react'
-import { createCss } from '@stitches/css'
-import { Provider, config } from './css'
+import { config, Provider } from '../css'
 
 /*
   With Typescript:
-  export default class MyApp extends App<{ serverCss: TCss<typeof config> }> {  
+  export default class MyApp extends App<{ serverCss: TCss<typeof config> }> {
 */
 export default class MyApp extends App {
   render() {

examples/with-stitches/pages/_document.js

 import { createCss } from '@stitches/css'
 import Document from 'next/document'
-
-import { config } from './css'
+import { config } from '../css'
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {

examples/with-stitches/pages/index.js

-import { styled } from './css'
-
-const Header = styled.h1((css) => css.color('RED'))
+import { useCss } from '../css'
 
 export default function Home() {
-  return <Header>Hello world</Header>
+  const css = useCss()
+  return <h1 className={css.color('RED')}>Hello world</h1>
 }