Convert more jsx/styled-components examples to TypeScript (#43117)

Converted 3 more examples to TypeScript. Individual contributions pushed as separate commits.

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

examples/with-styled-components-rtl/next.config.js

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  compiler: {
+    styledComponents: true,
+  },
+}
+
+module.exports = nextConfig

examples/with-styled-components-rtl/package.json

@@ -9,11 +9,16 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-is": "^17.0.2",
-    "styled-components": "^5.2.3",
-    "stylis-plugin-rtl": "1.0.0"
+    "react-is": "^18.2.0",
+    "styled-components": "^5.3.6",
+    "stylis-plugin-rtl": "^2.1.1"
   },
   "devDependencies": {
-    "babel-plugin-styled-components": "^1.12.0"
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@types/styled-components": "^5.1.26",
+    "babel-plugin-styled-components": "^2.0.7",
+    "typescript": "^4.9.3"
   }
 }

examples/with-styled-components-rtl/pages/_app.js → examples/with-styled-components-rtl/pages/_app.tsx

@@ -1,12 +1,14 @@
+import type { AppProps } from 'next/app'
+import type { DefaultTheme } from 'styled-components'
 import { ThemeProvider } from 'styled-components'
 
-const theme = {
+const theme: DefaultTheme = {
   colors: {
     primary: '#0070f3',
   },
 }
 
-export default function App({ Component, pageProps }) {
+export default function App({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider theme={theme}>
       <Component {...pageProps} />

examples/with-styled-components-rtl/pages/_document.tsx

@@ -0,0 +1,33 @@
+import type { DocumentContext, DocumentInitialProps } from 'next/document'
+import Document from 'next/document'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+import stylisRTLPlugin from 'stylis-plugin-rtl'
+
+export default class MyDocument extends Document {
+  static async getInitialProps(
+    ctx: DocumentContext
+  ): Promise<DocumentInitialProps> {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(
+              <StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
+                <App {...props} />
+              </StyleSheetManager>
+            ),
+        })
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: [initialProps.styles, sheet.getStyleElement()],
+      }
+    } finally {
+      sheet.seal()
+    }
+  }
+}

examples/with-styled-components-rtl/styled.d.ts

@@ -0,0 +1,9 @@
+import 'styled-components'
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    colors: {
+      primary: string
+    }
+  }
+}

examples/with-styled-components-rtl/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "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", "styled.d.ts"],
+  "exclude": ["node_modules"]
+}

examples/with-styled-jsx-plugins/package.json

@@ -6,18 +6,24 @@
     "start": "next start"
   },
   "dependencies": {
+    "lost": "^9.0.1",
     "next": "latest",
-    "lost": "8.2.0",
-    "postcss-nested": "5.0.5",
-    "postcss": "8.2.9",
+    "postcss": "^8.4.19",
+    "postcss-nested": "^6.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "styled-jsx-plugin-postcss": "4.0.1"
+    "styled-jsx-plugin-postcss": "^4.0.1"
   },
   "postcss": {
     "plugins": {
       "lost": {},
       "postcss-nested": {}
     }
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "typescript": "^4.9.3"
   }
 }

examples/with-styled-jsx-plugins/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"]
+}

examples/with-styled-jsx-scss/package.json

@@ -11,7 +11,11 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "sass": "^1.32.8",
-    "@styled-jsx/plugin-sass": "^3.0.0"
+    "@styled-jsx/plugin-sass": "^4.0.2",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "sass": "^1.56.1",
+    "typescript": "^4.9.3"
   }
 }

examples/with-styled-jsx-scss/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"]
+}