Convert with-cssed, with-csx, with-styled-jsx examples to TypeS…

…cript (#43018) Updated 3 more examples to TypeScript. Changes to individual examples pushed as separate commits. - Swapped `cxs/lite` for `cxs`, as it's the only mode supported by `@types/cxs`. ## Documentation / Examples - [X] Make sure the linting passes by running `pnpm build && pnpm lint` - [X] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
vercel · Nov 17, 2022 · 07d3da1 · 07d3da1
1 parent 0a2ae76
commit 07d3da1
Show file tree

Hide file tree

Showing 13 changed files with 123 additions and 41 deletions.
diff --git a/examples/with-cssed/.gitignore b/examples/with-cssed/.gitignore
@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# cssed compilation artifacts 
+.*.module.css
diff --git a/examples/with-cssed/lib/theme.js → examples/with-cssed/lib/theme.ts b/examples/with-cssed/lib/theme.js → examples/with-cssed/lib/theme.ts
diff --git a/examples/with-cssed/package.json b/examples/with-cssed/package.json
@@ -6,11 +6,16 @@
     "start": "next start"
   },
   "dependencies": {
-    "@types/react": "^16.9.48",
-    "babel-plugin-macros": "^2.8.0",
-    "cssed": "^1.1.2",
+    "babel-plugin-macros": "^3.1.0",
+    "cssed": "^1.1.5",
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "typescript": "^4.9.3"
   }
 }
diff --git a/examples/with-cssed/pages/index.js → examples/with-cssed/pages/index.tsx b/examples/with-cssed/pages/index.js → examples/with-cssed/pages/index.tsx
@@ -31,13 +31,14 @@ const styles = css`
 
 export default function Home() {
   const [isDark, setDark] = useState(false)
+
   return (
     <>
       <Head>
         <title>With cssed</title>
       </Head>
       <div
-        onClick={() => setDark(!isDark)}
+        onClick={() => setDark((prevState) => !prevState)}
         className={styles.box + ' ' + (isDark ? styles.dark : styles.light)}
       >
         Cssed demo

diff --git a/examples/with-cssed/tsconfig.json b/examples/with-cssed/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/with-cxs/package.json b/examples/with-cxs/package.json
@@ -6,9 +6,16 @@
     "start": "next start"
   },
   "dependencies": {
-    "cxs": "^3.0.0",
+    "cxs": "^6.2.0",
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/cxs": "^6.2.1",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "typescript": "^4.9.3"
   }
 }
diff --git a/examples/with-cxs/pages/_document.js b/examples/with-cxs/pages/_document.js
diff --git a/examples/with-cxs/pages/_document.tsx b/examples/with-cxs/pages/_document.tsx
@@ -0,0 +1,35 @@
+import type { DocumentContext, DocumentInitialProps } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import cxs from 'cxs'
+
+export default class MyDocument extends Document {
+  static async getInitialProps(
+    ctx: DocumentContext
+  ): Promise<DocumentInitialProps> {
+    const initialProps = await Document.getInitialProps(ctx)
+    const styles = cxs.css()
+    cxs.reset()
+
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          <style dangerouslySetInnerHTML={{ __html: styles }} />
+        </>
+      ),
+    }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/examples/with-cxs/pages/index.js → examples/with-cxs/pages/index.tsx b/examples/with-cxs/pages/index.js → examples/with-cxs/pages/index.tsx
@@ -1,12 +1,4 @@
-import cxs from 'cxs/lite'
-
-// Using cxs/lite on both the server and client,
-// the styles will need to be rehydrated.
-if (typeof window !== 'undefined') {
-  const styleTag = document.getElementById('cxs-style')
-  const serverCss = styleTag.innerHTML
-  cxs.rehydrate(serverCss)
-}
+import cxs from 'cxs'
 
 const cx = {
   root: cxs({

diff --git a/examples/with-cxs/tsconfig.json b/examples/with-cxs/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/with-styled-jsx/package.json b/examples/with-styled-jsx/package.json
@@ -9,5 +9,11 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "typescript": "^4.9.3"
   }
 }
diff --git a/examples/with-styled-jsx/pages/index.js → examples/with-styled-jsx/pages/index.tsx b/examples/with-styled-jsx/pages/index.js → examples/with-styled-jsx/pages/index.tsx
diff --git a/examples/with-styled-jsx/tsconfig.json b/examples/with-styled-jsx/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}