From de211ee0319c0243400a178be282060fdebf0f73 Mon Sep 17 00:00:00 2001 From: Sacha Van den Wyngaert Date: Thu, 24 Feb 2022 15:10:25 +0100 Subject: [PATCH 1/9] rename example with-styled-components to with-styled-components-babel --- .../.babelrc | 0 .../.gitignore | 0 .../README.md | 0 .../package.json | 0 .../pages/_app.js | 0 .../pages/_document.js | 0 .../pages/index.js | 0 7 files changed, 0 insertions(+), 0 deletions(-) rename examples/{with-styled-components => with-styled-components-babel}/.babelrc (100%) rename examples/{with-styled-components => with-styled-components-babel}/.gitignore (100%) rename examples/{with-styled-components => with-styled-components-babel}/README.md (100%) rename examples/{with-styled-components => with-styled-components-babel}/package.json (100%) rename examples/{with-styled-components => with-styled-components-babel}/pages/_app.js (100%) rename examples/{with-styled-components => with-styled-components-babel}/pages/_document.js (100%) rename examples/{with-styled-components => with-styled-components-babel}/pages/index.js (100%) diff --git a/examples/with-styled-components/.babelrc b/examples/with-styled-components-babel/.babelrc similarity index 100% rename from examples/with-styled-components/.babelrc rename to examples/with-styled-components-babel/.babelrc diff --git a/examples/with-styled-components/.gitignore b/examples/with-styled-components-babel/.gitignore similarity index 100% rename from examples/with-styled-components/.gitignore rename to examples/with-styled-components-babel/.gitignore diff --git a/examples/with-styled-components/README.md b/examples/with-styled-components-babel/README.md similarity index 100% rename from examples/with-styled-components/README.md rename to examples/with-styled-components-babel/README.md diff --git a/examples/with-styled-components/package.json b/examples/with-styled-components-babel/package.json similarity index 100% rename from examples/with-styled-components/package.json rename to examples/with-styled-components-babel/package.json diff --git a/examples/with-styled-components/pages/_app.js b/examples/with-styled-components-babel/pages/_app.js similarity index 100% rename from examples/with-styled-components/pages/_app.js rename to examples/with-styled-components-babel/pages/_app.js diff --git a/examples/with-styled-components/pages/_document.js b/examples/with-styled-components-babel/pages/_document.js similarity index 100% rename from examples/with-styled-components/pages/_document.js rename to examples/with-styled-components-babel/pages/_document.js diff --git a/examples/with-styled-components/pages/index.js b/examples/with-styled-components-babel/pages/index.js similarity index 100% rename from examples/with-styled-components/pages/index.js rename to examples/with-styled-components-babel/pages/index.js From b3f4e500015af88eb13ce0da653c7d14f835dfa2 Mon Sep 17 00:00:00 2001 From: Sacha Van den Wyngaert Date: Thu, 24 Feb 2022 15:39:33 +0100 Subject: [PATCH 2/9] update with-styled-components references --- examples/with-styled-components-babel/README.md | 12 ++++++------ ....test.ts => with-styled-components-babel.test.ts} | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) rename test/e2e/yarn-pnp/test/{with-styled-components.test.ts => with-styled-components-babel.test.ts} (61%) diff --git a/examples/with-styled-components-babel/README.md b/examples/with-styled-components-babel/README.md index 243e34b97d70..8f17db431d0c 100644 --- a/examples/with-styled-components-babel/README.md +++ b/examples/with-styled-components-babel/README.md @@ -1,4 +1,4 @@ -# Example app with styled-components +# Example app with styled-components using babel This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components). @@ -8,29 +8,29 @@ For this purpose we are extending the `` and injecting the server si Preview the example live on [StackBlitz](http://stackblitz.com/): -[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-styled-components) +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-styled-components-babel) ## Deploy your own Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-styled-components&project-name=with-styled-components&repository-name=with-styled-components) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-babel&project-name=with-styled-components-babel&repository-name=with-styled-components-babel) ## How to use Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: ```bash -npx create-next-app --example with-styled-components with-styled-components-app +npx create-next-app --example with-styled-components-babel with-styled-components-babel-app # or -yarn create next-app --example with-styled-components with-styled-components-app +yarn create next-app --example with-styled-components-babel with-styled-components-babel-app ``` Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ### Try it on CodeSandbox -[Open this example on CodeSandbox](https://codesandbox.io/s/github/vercel/next.js/tree/canary/examples/with-styled-components) +[Open this example on CodeSandbox](https://codesandbox.io/s/github/vercel/next.js/tree/canary/examples/with-styled-components-babel) ### Notes diff --git a/test/e2e/yarn-pnp/test/with-styled-components.test.ts b/test/e2e/yarn-pnp/test/with-styled-components-babel.test.ts similarity index 61% rename from test/e2e/yarn-pnp/test/with-styled-components.test.ts rename to test/e2e/yarn-pnp/test/with-styled-components-babel.test.ts index f8ee921afe98..35c778df540b 100644 --- a/test/e2e/yarn-pnp/test/with-styled-components.test.ts +++ b/test/e2e/yarn-pnp/test/with-styled-components-babel.test.ts @@ -1,5 +1,5 @@ import { runTests } from './utils' describe('yarn PnP', () => { - runTests('with-styled-components') + runTests('with-styled-components-babel') }) From d64def83c7795db1a6dd5088f437d2d74a9c0391 Mon Sep 17 00:00:00 2001 From: Sacha Van den Wyngaert Date: Thu, 24 Feb 2022 15:40:17 +0100 Subject: [PATCH 3/9] update docs on react hydratation erros for styled components --- errors/react-hydration-error.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/errors/react-hydration-error.md b/errors/react-hydration-error.md index 38ea8e05540b..5b0ae7b6a500 100644 --- a/errors/react-hydration-error.md +++ b/errors/react-hydration-error.md @@ -41,8 +41,9 @@ Common causes with css-in-js libraries: - When using Styled Components / Emotion - When css-in-js libraries are not set up for pre-rendering (SSR/SSG) it will often lead to a hydration mismatch. In general this means the application has to follow the Next.js example for the library. For example if `pages/_document` is missing and the Babel plugin is not added. - - Possible fix for Styled Components: https://github.com/vercel/next.js/tree/canary/examples/with-styled-components - - If you want to leverage Styled Components with the new Next.js Compiler in Next.js 12 there is an [experimental flag available](https://github.com/vercel/next.js/discussions/30174#discussion-3643870) + - Possible fix for Styled Components: + - If you want to leverage Styled Components with SWC in Next.js 12.1+ you need to [add it to your Next.js config under compiler options](https://nextjs.org/docs/advanced-features/compiler#styled-components): https://github.com/vercel/next.js/tree/canary/examples/with-styled-components + - If you want to use Styled Components with Babel, you need `pages/_document` and the Babel plugin: https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-babel - Possible fix for Emotion: https://github.com/vercel/next.js/tree/canary/examples/with-emotion - When using other css-in-js libraries - Similar to Styled Components / Emotion css-in-js libraries generally need configuration specified in their examples in the [examples directory](https://github.com/vercel/next.js/tree/canary/examples) From d95ae606bc5e52532b4d9546de137d86a2fe88fa Mon Sep 17 00:00:00 2001 From: Sacha Van den Wyngaert Date: Thu, 24 Feb 2022 15:57:01 +0100 Subject: [PATCH 4/9] clone with-styled-components-babel without babel config --- examples/with-styled-components/.gitignore | 34 ++++++++ examples/with-styled-components/README.md | 86 +++++++++++++++++++ examples/with-styled-components/package.json | 15 ++++ examples/with-styled-components/pages/_app.js | 26 ++++++ .../with-styled-components/pages/index.js | 10 +++ 5 files changed, 171 insertions(+) create mode 100644 examples/with-styled-components/.gitignore create mode 100644 examples/with-styled-components/README.md create mode 100644 examples/with-styled-components/package.json create mode 100644 examples/with-styled-components/pages/_app.js create mode 100644 examples/with-styled-components/pages/index.js diff --git a/examples/with-styled-components/.gitignore b/examples/with-styled-components/.gitignore new file mode 100644 index 000000000000..1437c53f70bc --- /dev/null +++ b/examples/with-styled-components/.gitignore @@ -0,0 +1,34 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel diff --git a/examples/with-styled-components/README.md b/examples/with-styled-components/README.md new file mode 100644 index 000000000000..520410c42336 --- /dev/null +++ b/examples/with-styled-components/README.md @@ -0,0 +1,86 @@ +# Example app with styled-components + +This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components). + +For this purpose we are using the [Next.js SWC compiler](https://nextjs.org/docs/advanced-features/compiler#styled-components). + +Currently, only the `ssr` and `displayName` transforms have been implemented. These two transforms are the main requirement for using `styled-components` in Next.js. + +## Preview + +Preview the example live on [StackBlitz](http://stackblitz.com/): + +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-styled-components) + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-styled-components&project-name=with-styled-components&repository-name=with-styled-components) + +## How to use + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: + +```bash +npx create-next-app --example with-styled-components with-styled-components-app +# or +yarn create next-app --example with-styled-components with-styled-components-app +``` + +Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). + +### Try it on CodeSandbox + +[Open this example on CodeSandbox](https://codesandbox.io/s/github/vercel/next.js/tree/canary/examples/with-styled-components) + +### Notes + +When wrapping a [Link](https://nextjs.org/docs/api-reference/next/link) from `next/link` within a styled-component, the [as](https://styled-components.com/docs/api#as-polymorphic-prop) prop provided by `styled` will collide with the Link's `as` prop and cause styled-components to throw an `Invalid tag` error. To avoid this, you can either use the recommended [forwardedAs](https://styled-components.com/docs/api#forwardedas-prop) prop from styled-components or use a different named prop to pass to a `styled` Link. + +
+Click to expand workaround example +
+ +**components/StyledLink.js** + +```javascript +import Link from 'next/link' +import styled from 'styled-components' + +const StyledLink = ({ as, children, className, href }) => ( + + {children} + +) + +export default styled(StyledLink)` + color: #0075e0; + text-decoration: none; + transition: all 0.2s ease-in-out; + + &:hover { + color: #40a9ff; + } + + &:focus { + color: #40a9ff; + outline: none; + border: 0; + } +` +``` + +**pages/index.js** + +```javascript +import StyledLink from '../components/StyledLink' + +export default () => ( + + First post + +) +``` + +
diff --git a/examples/with-styled-components/package.json b/examples/with-styled-components/package.json new file mode 100644 index 000000000000..c5b30dc1b2c7 --- /dev/null +++ b/examples/with-styled-components/package.json @@ -0,0 +1,15 @@ +{ + "private": true, + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "latest", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-is": "^17.0.2", + "styled-components": "^5.2.3" + } +} diff --git a/examples/with-styled-components/pages/_app.js b/examples/with-styled-components/pages/_app.js new file mode 100644 index 000000000000..019f78b2afc6 --- /dev/null +++ b/examples/with-styled-components/pages/_app.js @@ -0,0 +1,26 @@ +import { createGlobalStyle, ThemeProvider } from 'styled-components' + +const GlobalStyle = createGlobalStyle` + body { + margin: 0; + padding: 0; + box-sizing: border-box; + } +` + +const theme = { + colors: { + primary: '#0070f3', + }, +} + +export default function App({ Component, pageProps }) { + return ( + <> + + + + + + ) +} diff --git a/examples/with-styled-components/pages/index.js b/examples/with-styled-components/pages/index.js new file mode 100644 index 000000000000..8d1e94ba0110 --- /dev/null +++ b/examples/with-styled-components/pages/index.js @@ -0,0 +1,10 @@ +import styled from 'styled-components' + +const Title = styled.h1` + font-size: 50px; + color: ${({ theme }) => theme.colors.primary}; +` + +export default function Home() { + return My page +} From 09172f405bcc34a86bfa9ea2e1cfc804453b537e Mon Sep 17 00:00:00 2001 From: Sacha Van den Wyngaert Date: Thu, 24 Feb 2022 15:57:48 +0100 Subject: [PATCH 5/9] add styledComponents to compiler options in next.config --- examples/with-styled-components/next.config.js | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 examples/with-styled-components/next.config.js diff --git a/examples/with-styled-components/next.config.js b/examples/with-styled-components/next.config.js new file mode 100644 index 000000000000..52503c2612a3 --- /dev/null +++ b/examples/with-styled-components/next.config.js @@ -0,0 +1,10 @@ +/** @type {import('next').NextConfig} */ + +const nextConfig = { + reactStrictMode: true, + compiler: { + styledComponents: true, + }, +} + +module.exports = nextConfig From 1341657acac81b46574b9a0dcced461b37a82048 Mon Sep 17 00:00:00 2001 From: Sacha Van den Wyngaert Date: Thu, 24 Feb 2022 16:08:22 +0100 Subject: [PATCH 6/9] replace babel dependency with Next.js SWC compiler --- .../.babelrc | 4 --- .../next.config.js | 10 +++++++ .../package.json | 1 - .../pages/_document.tsx | 30 ------------------- 4 files changed, 10 insertions(+), 35 deletions(-) delete mode 100644 examples/with-typescript-styled-components/.babelrc create mode 100644 examples/with-typescript-styled-components/next.config.js delete mode 100644 examples/with-typescript-styled-components/pages/_document.tsx diff --git a/examples/with-typescript-styled-components/.babelrc b/examples/with-typescript-styled-components/.babelrc deleted file mode 100644 index 854cb73a8103..000000000000 --- a/examples/with-typescript-styled-components/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": [["styled-components", { "ssr": true }]] -} diff --git a/examples/with-typescript-styled-components/next.config.js b/examples/with-typescript-styled-components/next.config.js new file mode 100644 index 000000000000..52503c2612a3 --- /dev/null +++ b/examples/with-typescript-styled-components/next.config.js @@ -0,0 +1,10 @@ +/** @type {import('next').NextConfig} */ + +const nextConfig = { + reactStrictMode: true, + compiler: { + styledComponents: true, + }, +} + +module.exports = nextConfig diff --git a/examples/with-typescript-styled-components/package.json b/examples/with-typescript-styled-components/package.json index 18ad75ca09f7..1f77679badbd 100644 --- a/examples/with-typescript-styled-components/package.json +++ b/examples/with-typescript-styled-components/package.json @@ -17,7 +17,6 @@ "@types/react": "17.0.4", "@types/react-dom": "17.0.3", "@types/styled-components": "5.1.9", - "babel-plugin-styled-components": "^1.12.0", "typescript": "4.2.4" } } diff --git a/examples/with-typescript-styled-components/pages/_document.tsx b/examples/with-typescript-styled-components/pages/_document.tsx deleted file mode 100644 index eb67e4c6d739..000000000000 --- a/examples/with-typescript-styled-components/pages/_document.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import Document, { DocumentContext } from 'next/document' -import { ServerStyleSheet } from 'styled-components' - -export default class MyDocument extends Document { - static async getInitialProps(ctx: DocumentContext) { - 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() - } - } -} From 576c72114132ad76dee3563101fb5ecde0b131a8 Mon Sep 17 00:00:00 2001 From: Sacha Van den Wyngaert Date: Thu, 24 Feb 2022 16:13:10 +0100 Subject: [PATCH 7/9] upgrade example typescript version example with-typescript-styled-components had a typescript dependency lower than the recommended version. Upgraded from 4.2.4 to 4.5.5. --- examples/with-typescript-styled-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-typescript-styled-components/package.json b/examples/with-typescript-styled-components/package.json index 1f77679badbd..76f91cde30c1 100644 --- a/examples/with-typescript-styled-components/package.json +++ b/examples/with-typescript-styled-components/package.json @@ -17,6 +17,6 @@ "@types/react": "17.0.4", "@types/react-dom": "17.0.3", "@types/styled-components": "5.1.9", - "typescript": "4.2.4" + "typescript": "^4.5.5" } } From 5ca51db93eb3ca4e85668490115c46371b07e2f7 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Thu, 24 Feb 2022 19:46:11 -0700 Subject: [PATCH 8/9] Apply suggestions from code review --- examples/with-styled-components-babel/README.md | 4 ---- examples/with-styled-components/README.md | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/examples/with-styled-components-babel/README.md b/examples/with-styled-components-babel/README.md index 8f17db431d0c..58c4928f7ef3 100644 --- a/examples/with-styled-components-babel/README.md +++ b/examples/with-styled-components-babel/README.md @@ -28,10 +28,6 @@ yarn create next-app --example with-styled-components-babel with-styled-componen Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). -### Try it on CodeSandbox - -[Open this example on CodeSandbox](https://codesandbox.io/s/github/vercel/next.js/tree/canary/examples/with-styled-components-babel) - ### Notes When wrapping a [Link](https://nextjs.org/docs/api-reference/next/link) from `next/link` within a styled-component, the [as](https://styled-components.com/docs/api#as-polymorphic-prop) prop provided by `styled` will collide with the Link's `as` prop and cause styled-components to throw an `Invalid tag` error. To avoid this, you can either use the recommended [forwardedAs](https://styled-components.com/docs/api#forwardedas-prop) prop from styled-components or use a different named prop to pass to a `styled` Link. diff --git a/examples/with-styled-components/README.md b/examples/with-styled-components/README.md index 520410c42336..5a0542590fca 100644 --- a/examples/with-styled-components/README.md +++ b/examples/with-styled-components/README.md @@ -2,7 +2,7 @@ This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components). -For this purpose we are using the [Next.js SWC compiler](https://nextjs.org/docs/advanced-features/compiler#styled-components). +This example uses the Rust-based [SWC](https://nextjs.org/docs/advanced-features/compiler#styled-components) in Next.js for better performance than Babel. Currently, only the `ssr` and `displayName` transforms have been implemented. These two transforms are the main requirement for using `styled-components` in Next.js. From 98a0650dc415c04ffb0cbd1fc97270b225e283b3 Mon Sep 17 00:00:00 2001 From: Sacha Van den Wyngaert Date: Fri, 25 Feb 2022 09:59:32 +0100 Subject: [PATCH 9/9] update readme for with-styled-components-babel remove Notes section since it describes a workaround which is no longer required to work with `next/link`. --- .../with-styled-components-babel/README.md | 51 ------------------- 1 file changed, 51 deletions(-) diff --git a/examples/with-styled-components-babel/README.md b/examples/with-styled-components-babel/README.md index 58c4928f7ef3..f9f489ed9459 100644 --- a/examples/with-styled-components-babel/README.md +++ b/examples/with-styled-components-babel/README.md @@ -27,54 +27,3 @@ yarn create next-app --example with-styled-components-babel with-styled-componen ``` Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). - -### Notes - -When wrapping a [Link](https://nextjs.org/docs/api-reference/next/link) from `next/link` within a styled-component, the [as](https://styled-components.com/docs/api#as-polymorphic-prop) prop provided by `styled` will collide with the Link's `as` prop and cause styled-components to throw an `Invalid tag` error. To avoid this, you can either use the recommended [forwardedAs](https://styled-components.com/docs/api#forwardedas-prop) prop from styled-components or use a different named prop to pass to a `styled` Link. - -
-Click to expand workaround example -
- -**components/StyledLink.js** - -```javascript -import Link from 'next/link' -import styled from 'styled-components' - -const StyledLink = ({ as, children, className, href }) => ( - - {children} - -) - -export default styled(StyledLink)` - color: #0075e0; - text-decoration: none; - transition: all 0.2s ease-in-out; - - &:hover { - color: #40a9ff; - } - - &:focus { - color: #40a9ff; - outline: none; - border: 0; - } -` -``` - -**pages/index.js** - -```javascript -import StyledLink from '../components/StyledLink' - -export default () => ( - - First post - -) -``` - -