From 04ff5253af701ec15b3281a0329c5d9befcfbd9c Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Wed, 30 Mar 2022 17:52:04 -0500
Subject: [PATCH 1/2] Fix document styles with react 18

---
 packages/next/server/render.tsx                  | 7 ++-----
 test/development/basic/styled-components.test.ts | 8 +++++++-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index 25b1dffb72871ec..fc6cf4a89d3272f 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -1431,21 +1431,18 @@ export async function renderToHTML(
         })
       }
 
-      const styles = jsxStyleRegistry.styles()
-      jsxStyleRegistry.flush()
-
       const documentInitialPropsRes =
         isServerComponent || process.browser || !Document.getInitialProps
           ? {}
           : await documentInitialProps()
       if (documentInitialPropsRes === null) return null
 
+      const { docProps } = (documentInitialPropsRes as any) || {}
       const documentElement = () => {
         if (isServerComponent || process.browser) {
           return (Document as any)()
         }
 
-        const { docProps } = (documentInitialPropsRes as any) || {}
         return <Document {...htmlProps} {...docProps} />
       }
 
@@ -1454,7 +1451,7 @@ export async function renderToHTML(
         documentElement,
         head,
         headTags: [],
-        styles,
+        styles: docProps.styles,
       }
     }
   }
diff --git a/test/development/basic/styled-components.test.ts b/test/development/basic/styled-components.test.ts
index 6e350c3c473a05d..38b4bb9ca294476 100644
--- a/test/development/basic/styled-components.test.ts
+++ b/test/development/basic/styled-components.test.ts
@@ -2,7 +2,7 @@ import { join } from 'path'
 import webdriver from 'next-webdriver'
 import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
-import { fetchViaHTTP } from 'next-test-utils'
+import { fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
 
 describe('styled-components SWC transform', () => {
   let next: NextInstance
@@ -69,4 +69,10 @@ describe('styled-components SWC transform', () => {
       )
     ).toBe('rgb(255, 255, 255)')
   })
+
+  it('should contain styles in initial HTML', async () => {
+    const html = await renderViaHTTP(next.url, '/')
+    expect(html).toContain('background:transparent')
+    expect(html).toContain('color:white')
+  })
 })

From 8daae43304ac1cdfc638e6c3764682242da3c898 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Wed, 30 Mar 2022 18:19:03 -0500
Subject: [PATCH 2/2] handle no doc gip case

---
 packages/next/server/render.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index fc6cf4a89d3272f..7eecc8a642ffb0d 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -1431,10 +1431,15 @@ export async function renderToHTML(
         })
       }
 
-      const documentInitialPropsRes =
-        isServerComponent || process.browser || !Document.getInitialProps
-          ? {}
-          : await documentInitialProps()
+      const hasDocumentGetInitialProps = !(
+        isServerComponent ||
+        process.browser ||
+        !Document.getInitialProps
+      )
+
+      const documentInitialPropsRes = hasDocumentGetInitialProps
+        ? await documentInitialProps()
+        : {}
       if (documentInitialPropsRes === null) return null
 
       const { docProps } = (documentInitialPropsRes as any) || {}
@@ -1445,13 +1450,21 @@ export async function renderToHTML(
 
         return <Document {...htmlProps} {...docProps} />
       }
+      let styles
+
+      if (hasDocumentGetInitialProps) {
+        styles = docProps.styles
+      } else {
+        styles = jsxStyleRegistry.styles()
+        jsxStyleRegistry.flush()
+      }
 
       return {
         bodyResult,
         documentElement,
         head,
         headTags: [],
-        styles: docProps.styles,
+        styles,
       }
     }
   }