Update with-stitches example (#16827)

Hi 👋 

[Stitches](https://stitches.dev) `v0.0.1` beta was recently released. This PR updates the existing examples to the latest packages and API.

Notes:
- Remove `with-stitches-styled` example, that's no longer needed
- Update `with-stitches` example
  - Update dependency
  - Example done with Typescript
- Updated README

Thanks ✌️ 

![CleanShot 2020-09-03 at 18 23 09@2x](https://user-images.githubusercontent.com/372831/92141867-52d98d80-ee13-11ea-91ed-001cd46989f1.jpg)

examples/with-stitches/README.md

@@ -1,6 +1,6 @@
 # Stitches Example
 
-This example shows how to use the [Stitches CSS-in-JS Library](https://github.com/christianalfoni/stitches).
+This example shows how to use the [Stitches CSS-in-JS Library](https://github.com/modulz/stitches).
 
 ## Deploy your own
 

examples/with-stitches/components/StitchesLogo.tsx

@@ -0,0 +1,50 @@
+const StitchesLogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="35"
+    height="35"
+    viewBox="0 0 35 35"
+    fill="none"
+  >
+    <circle
+      cx="17.5"
+      cy="17.5"
+      r="14.5"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+    <path d="M12.8184 31.3218L31.8709 20.3218" stroke="currentColor" />
+    <path d="M3.31836 14.8674L22.3709 3.86743" stroke="currentColor" />
+    <path
+      d="M8.65332 29.1077L25.9738 19.1077"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9.21582 16.0815L26.5363 6.08154"
+      stroke="currentColor"
+      strokeLinecap="round"
+    />
+    <path
+      d="M13.2334 14.2297L22.5099 21.1077"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.6973 12.2302L25.9736 19.1078"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9.21582 16.0815L19.0459 23.1078"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default StitchesLogo

examples/with-stitches/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

examples/with-stitches/package.json

@@ -1,21 +1,20 @@
 {
-  "name": "stitches",
+  "name": "with-stitches",
   "version": "0.1.0",
-  "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "@stitches/css": "3.0.2",
-    "next": "9.3.5",
-    "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "@stitches/react": "0.0.1",
+    "next": "latest",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "@types/react": "^16.9.34",
-    "typescript": "^3.8.3"
+    "@types/react": "^16.9.43",
+    "typescript": "^3.9.7"
   },
   "license": "MIT"
 }

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

@@ -1,8 +1,9 @@
-import Document from 'next/document'
-import { css } from '../css'
+import React from 'react'
+import NextDocument, { DocumentContext } from 'next/document'
+import { css } from '../stitches.config'
 
-export default class MyDocument extends Document {
-  static async getInitialProps(ctx) {
+export default class Document extends NextDocument {
+  static async getInitialProps(ctx: DocumentContext) {
     const originalRenderPage = ctx.renderPage
 
     try {
@@ -13,15 +14,19 @@ export default class MyDocument extends Document {
         return result
       }
 
-      const initialProps = await Document.getInitialProps(ctx)
+      const initialProps = await NextDocument.getInitialProps(ctx)
 
       return {
         ...initialProps,
         styles: (
           <>
             {initialProps.styles}
+
             {extractedStyles.map((content, index) => (
-              <style key={index}>{content}</style>
+              <style
+                key={index}
+                dangerouslySetInnerHTML={{ __html: content }}
+              />
             ))}
           </>
         ),

examples/with-stitches/pages/index.tsx

@@ -0,0 +1,53 @@
+import Head from 'next/head'
+import { styled } from '../stitches.config'
+import StitchesLogo from '../components/StitchesLogo'
+
+const Box = styled('div', {})
+
+const Text = styled('p', {
+  fontFamily: '$system',
+  color: '$hiContrast',
+})
+
+const Link = styled('a', {
+  fontFamily: '$system',
+  textDecoration: 'none',
+  color: '$purple600',
+})
+
+const Container = styled('div', {
+  marginX: 'auto',
+  paddingX: '$3',
+
+  variants: {
+    size: {
+      '1': {
+        maxWidth: '300px',
+      },
+      '2': {
+        maxWidth: '585px',
+      },
+      '3': {
+        maxWidth: '865px',
+      },
+    },
+  },
+})
+
+export default function Home() {
+  return (
+    <Box css={{ paddingY: '$6' }}>
+      <Head>
+        <title>Use Stitches with Next.js</title>
+      </Head>
+      <Container size={{ initial: '1', bp1: '2' }}>
+        <StitchesLogo />
+        <Text as="h1">Hello, from Stitches.</Text>
+        <Text>
+          For full documentation, visit{' '}
+          <Link href="https://stitches.dev">stitches.dev</Link>.
+        </Text>
+      </Container>
+    </Box>
+  )
+}