diff --git a/examples/with-cssed/.gitignore b/examples/with-cssed/.gitignore
index c87c9b392c02..bcb46bc27e57 100644
--- 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 b/examples/with-cssed/lib/theme.ts
similarity index 100%
rename from examples/with-cssed/lib/theme.js
rename to examples/with-cssed/lib/theme.ts
diff --git a/examples/with-cssed/package.json b/examples/with-cssed/package.json
index 5a26177c1b0c..9e7e62792641 100644
--- 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 b/examples/with-cssed/pages/index.tsx
similarity index 93%
rename from examples/with-cssed/pages/index.js
rename to examples/with-cssed/pages/index.tsx
index 0dda7c0f2fb8..54b0cbefb3f0 100644
--- a/examples/with-cssed/pages/index.js
+++ b/examples/with-cssed/pages/index.tsx
@@ -31,13 +31,14 @@ const styles = css`
export default function Home() {
const [isDark, setDark] = useState(false)
+
return (
<>
With cssed
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
new file mode 100644
index 000000000000..b8d597880a1a
--- /dev/null
+++ 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
index 0c77e424a5dc..c68a80ee36b9 100644
--- 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
deleted file mode 100644
index 3e6bc93e4fe6..000000000000
--- a/examples/with-cxs/pages/_document.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-import cxs from 'cxs/lite'
-
-export default class MyDocument extends Document {
- static async getInitialProps({ renderPage }) {
- const page = await renderPage()
- const style = cxs.getCss()
- return { ...page, style }
- }
-
- render() {
- return (
-
-
-
-
-
-
-
-
-
- )
- }
-}
diff --git a/examples/with-cxs/pages/_document.tsx b/examples/with-cxs/pages/_document.tsx
new file mode 100644
index 000000000000..9a299395f355
--- /dev/null
+++ 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 {
+ const initialProps = await Document.getInitialProps(ctx)
+ const styles = cxs.css()
+ cxs.reset()
+
+ return {
+ ...initialProps,
+ styles: (
+ <>
+ {initialProps.styles}
+
+
+ ),
+ }
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/examples/with-cxs/pages/index.js b/examples/with-cxs/pages/index.tsx
similarity index 58%
rename from examples/with-cxs/pages/index.js
rename to examples/with-cxs/pages/index.tsx
index fe0921355373..9944f733e8ad 100644
--- a/examples/with-cxs/pages/index.js
+++ b/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
new file mode 100644
index 000000000000..b8d597880a1a
--- /dev/null
+++ 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
index bf29745bfe27..a062d6b02ae4 100644
--- 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 b/examples/with-styled-jsx/pages/index.tsx
similarity index 100%
rename from examples/with-styled-jsx/pages/index.js
rename to examples/with-styled-jsx/pages/index.tsx
diff --git a/examples/with-styled-jsx/tsconfig.json b/examples/with-styled-jsx/tsconfig.json
new file mode 100644
index 000000000000..b8d597880a1a
--- /dev/null
+++ 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"]
+}