From 5aab696606b55ae59ce68c31d199abfa746021c0 Mon Sep 17 00:00:00 2001
From: chemicalkosek <chemicalkosek@users.noreply.github.com>
Date: Wed, 9 Mar 2022 07:35:54 +0100
Subject: [PATCH 1/2] Create _document.js

`_document.js` was removed from the styled components swc example
I have tested with and without the custom `_document.js`
Unfortunately without `_document.js` there is FOUC (Flash of unstyled content) on initial request.
---
 .../with-styled-components/pages/_document.js | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 examples/with-styled-components/pages/_document.js

diff --git a/examples/with-styled-components/pages/_document.js b/examples/with-styled-components/pages/_document.js
new file mode 100644
index 000000000000..7df80076eebb
--- /dev/null
+++ b/examples/with-styled-components/pages/_document.js
@@ -0,0 +1,29 @@
+import Document from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}

From 4ce60fb397a3838366b8cf1d5d189496851aa399 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Thu, 10 Mar 2022 12:01:26 -0600
Subject: [PATCH 2/2] lint-fix

---
 .../with-styled-components/pages/_document.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/examples/with-styled-components/pages/_document.js b/examples/with-styled-components/pages/_document.js
index 7df80076eebb..2a59afeb93c1 100644
--- a/examples/with-styled-components/pages/_document.js
+++ b/examples/with-styled-components/pages/_document.js
@@ -1,18 +1,19 @@
-import Document from 'next/document';
-import { ServerStyleSheet } from 'styled-components';
+import Document from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const sheet = new ServerStyleSheet();
-    const originalRenderPage = ctx.renderPage;
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
 
     try {
       ctx.renderPage = () =>
         originalRenderPage({
-          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
-        });
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        })
 
-      const initialProps = await Document.getInitialProps(ctx);
+      const initialProps = await Document.getInitialProps(ctx)
       return {
         ...initialProps,
         styles: (
@@ -21,9 +22,9 @@ export default class MyDocument extends Document {
             {sheet.getStyleElement()}
           </>
         ),
-      };
+      }
     } finally {
-      sheet.seal();
+      sheet.seal()
     }
   }
 }