From 16786999bfd7a6162c70eacaad735f4ee044627a Mon Sep 17 00:00:00 2001 From: Max Proske Date: Fri, 18 Nov 2022 22:01:13 -0800 Subject: [PATCH 1/3] Convert `with-styled-jsx-plugins` example to TypeScript --- examples/with-styled-jsx-plugins/package.json | 14 +++++++++---- .../pages/{index.js => index.tsx} | 0 .../with-styled-jsx-plugins/tsconfig.json | 20 +++++++++++++++++++ 3 files changed, 30 insertions(+), 4 deletions(-) rename examples/with-styled-jsx-plugins/pages/{index.js => index.tsx} (100%) create mode 100644 examples/with-styled-jsx-plugins/tsconfig.json diff --git a/examples/with-styled-jsx-plugins/package.json b/examples/with-styled-jsx-plugins/package.json index 12ea68114f9a5..cc0dc072c4162 100644 --- a/examples/with-styled-jsx-plugins/package.json +++ b/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" } } diff --git a/examples/with-styled-jsx-plugins/pages/index.js b/examples/with-styled-jsx-plugins/pages/index.tsx similarity index 100% rename from examples/with-styled-jsx-plugins/pages/index.js rename to examples/with-styled-jsx-plugins/pages/index.tsx diff --git a/examples/with-styled-jsx-plugins/tsconfig.json b/examples/with-styled-jsx-plugins/tsconfig.json new file mode 100644 index 0000000000000..b8d597880a1ae --- /dev/null +++ b/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"] +} From 7660eee80d1ed05de91c04853ccf9a195b46e88f Mon Sep 17 00:00:00 2001 From: Max Proske Date: Fri, 18 Nov 2022 22:01:15 -0800 Subject: [PATCH 2/3] Convert `with-styled-jsx-scss` example to TypeScript --- examples/with-styled-jsx-scss/package.json | 8 ++++++-- .../pages/{index.js => index.tsx} | 0 examples/with-styled-jsx-scss/tsconfig.json | 20 +++++++++++++++++++ 3 files changed, 26 insertions(+), 2 deletions(-) rename examples/with-styled-jsx-scss/pages/{index.js => index.tsx} (100%) create mode 100644 examples/with-styled-jsx-scss/tsconfig.json diff --git a/examples/with-styled-jsx-scss/package.json b/examples/with-styled-jsx-scss/package.json index fa658dd995636..72633af58bb1b 100644 --- a/examples/with-styled-jsx-scss/package.json +++ b/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" } } diff --git a/examples/with-styled-jsx-scss/pages/index.js b/examples/with-styled-jsx-scss/pages/index.tsx similarity index 100% rename from examples/with-styled-jsx-scss/pages/index.js rename to examples/with-styled-jsx-scss/pages/index.tsx diff --git a/examples/with-styled-jsx-scss/tsconfig.json b/examples/with-styled-jsx-scss/tsconfig.json new file mode 100644 index 0000000000000..b8d597880a1ae --- /dev/null +++ b/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"] +} From c6856ec544f271e41240957f7ce813102990459b Mon Sep 17 00:00:00 2001 From: Max Proske Date: Fri, 18 Nov 2022 22:01:17 -0800 Subject: [PATCH 3/3] Convert `with-styled-components-rtl` example to TypeScript --- examples/with-styled-components-rtl/.babelrc | 4 --- .../with-styled-components-rtl/next.config.js | 8 +++++ .../with-styled-components-rtl/package.json | 13 +++++--- .../pages/{_app.js => _app.tsx} | 6 ++-- .../pages/_document.js | 33 ------------------- .../pages/_document.tsx | 33 +++++++++++++++++++ .../pages/{index.js => index.tsx} | 0 .../with-styled-components-rtl/styled.d.ts | 9 +++++ .../with-styled-components-rtl/tsconfig.json | 20 +++++++++++ 9 files changed, 83 insertions(+), 43 deletions(-) delete mode 100644 examples/with-styled-components-rtl/.babelrc create mode 100644 examples/with-styled-components-rtl/next.config.js rename examples/with-styled-components-rtl/pages/{_app.js => _app.tsx} (51%) delete mode 100644 examples/with-styled-components-rtl/pages/_document.js create mode 100644 examples/with-styled-components-rtl/pages/_document.tsx rename examples/with-styled-components-rtl/pages/{index.js => index.tsx} (100%) create mode 100644 examples/with-styled-components-rtl/styled.d.ts create mode 100644 examples/with-styled-components-rtl/tsconfig.json diff --git a/examples/with-styled-components-rtl/.babelrc b/examples/with-styled-components-rtl/.babelrc deleted file mode 100644 index 854cb73a81037..0000000000000 --- a/examples/with-styled-components-rtl/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": [["styled-components", { "ssr": true }]] -} diff --git a/examples/with-styled-components-rtl/next.config.js b/examples/with-styled-components-rtl/next.config.js new file mode 100644 index 0000000000000..607df2bf2ab23 --- /dev/null +++ b/examples/with-styled-components-rtl/next.config.js @@ -0,0 +1,8 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + compiler: { + styledComponents: true, + }, +} + +module.exports = nextConfig diff --git a/examples/with-styled-components-rtl/package.json b/examples/with-styled-components-rtl/package.json index 8fee1d98d7afa..17c6b6d172316 100644 --- a/examples/with-styled-components-rtl/package.json +++ b/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" } } diff --git a/examples/with-styled-components-rtl/pages/_app.js b/examples/with-styled-components-rtl/pages/_app.tsx similarity index 51% rename from examples/with-styled-components-rtl/pages/_app.js rename to examples/with-styled-components-rtl/pages/_app.tsx index e9f49a88f663a..ef288d4717d8b 100644 --- a/examples/with-styled-components-rtl/pages/_app.js +++ b/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 ( diff --git a/examples/with-styled-components-rtl/pages/_document.js b/examples/with-styled-components-rtl/pages/_document.js deleted file mode 100644 index d39d176d8eee0..0000000000000 --- a/examples/with-styled-components-rtl/pages/_document.js +++ /dev/null @@ -1,33 +0,0 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document' -import { ServerStyleSheet, StyleSheetManager } from 'styled-components' -import stylisRTLPlugin from 'stylis-plugin-rtl' - -export default class MyDocument extends Document { - static getInitialProps({ renderPage }) { - const sheet = new ServerStyleSheet() - - const page = renderPage( - (App) => (props) => - sheet.collectStyles( - - - - ) - ) - - const styleTags = sheet.getStyleElement() - - return { ...page, styleTags } - } - render() { - return ( - - {this.props.styleTags} - -
- - - - ) - } -} diff --git a/examples/with-styled-components-rtl/pages/_document.tsx b/examples/with-styled-components-rtl/pages/_document.tsx new file mode 100644 index 0000000000000..b9c39f493b700 --- /dev/null +++ b/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 { + const sheet = new ServerStyleSheet() + const originalRenderPage = ctx.renderPage + + try { + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App) => (props) => + sheet.collectStyles( + + + + ), + }) + + const initialProps = await Document.getInitialProps(ctx) + return { + ...initialProps, + styles: [initialProps.styles, sheet.getStyleElement()], + } + } finally { + sheet.seal() + } + } +} diff --git a/examples/with-styled-components-rtl/pages/index.js b/examples/with-styled-components-rtl/pages/index.tsx similarity index 100% rename from examples/with-styled-components-rtl/pages/index.js rename to examples/with-styled-components-rtl/pages/index.tsx diff --git a/examples/with-styled-components-rtl/styled.d.ts b/examples/with-styled-components-rtl/styled.d.ts new file mode 100644 index 0000000000000..60ad666ce00f8 --- /dev/null +++ b/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 + } + } +} diff --git a/examples/with-styled-components-rtl/tsconfig.json b/examples/with-styled-components-rtl/tsconfig.json new file mode 100644 index 0000000000000..4701c4c6f8777 --- /dev/null +++ b/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"] +}