determine if styles generated from default gip and drop it

vercel · Apr 30, 2022 · 1fb6a19 · 1fb6a19
1 parent 56375e9
commit 1fb6a19
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 16 deletions.
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
@@ -90,6 +90,7 @@ let warn: typeof import('../build/output/log').warn
 let postProcess: typeof import('../shared/lib/post-process').default
 
 const DOCTYPE = '<!DOCTYPE html>'
+const GIP_GEN_STYLES = '__GIP_GEN_STYLES__'
 const ReactDOMServer = process.env.__NEXT_REACT_ROOT
   ? require('react-dom/server.browser')
   : require('react-dom/server')
@@ -771,6 +772,7 @@ export async function renderToHTML(
 
       const { html, head } = await docCtx.renderPage({ enhanceApp })
       const styles = jsxStyleRegistry.styles({ nonce: options.nonce })
+      ;(styles as any)[GIP_GEN_STYLES] = true
       return { html, head, styles }
     },
   }
@@ -1492,7 +1494,6 @@ export async function renderToHTML(
         process.env.NEXT_RUNTIME === 'edge' ||
         !Document.getInitialProps
       )
-      const isDefaultDocument = !!BuiltinFunctionalDocument
 
       const bodyResult = async (suffix: string) => {
         // this must be called inside bodyResult so appWrappers is
@@ -1579,10 +1580,10 @@ export async function renderToHTML(
 
       let styles: any[]
       if (hasDocumentGetInitialProps) {
-        // If it's using getInitialProps of default Document in concurrent mode,
-        // use generated styles from flush-effects instead of getInitialProps.
+        // If styles are generated from default Document.getInitialProps in concurrent mode,
+        // discard it and use generated styles from flush-effects instead.
         // To guarantee it's concurrent safe and no duplicates in both head and body.
-        styles = isDefaultDocument ? [] : docProps.styles
+        styles = docProps.styles[GIP_GEN_STYLES] ? [] : docProps.styles
       } else {
         styles = jsxStyleRegistry.styles()
         jsxStyleRegistry.flush()

diff --git a/test/e2e/styled-jsx/app/pages/index.js b/test/e2e/styled-jsx/app/pages/index.js
@@ -0,0 +1,8 @@
+export default function Page() {
+  return (
+    <div>
+      <style jsx>{'p { color: red; }'}</style>
+      <p>hello world</p>
+    </div>
+  )
+}
diff --git a/test/e2e/styled-jsx/index.test.ts b/test/e2e/styled-jsx/index.test.ts
@@ -1,26 +1,34 @@
-import { createNext } from 'e2e-utils'
+import path from 'path'
+import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
 import { renderViaHTTP } from 'next-test-utils'
 import cheerio from 'cheerio'
 
+const appDir = path.join(__dirname, 'app')
+
 function runTest(packageManager?: string) {
   describe(`styled-jsx${packageManager ? ' ' + packageManager : ''}`, () => {
     let next: NextInstance
 
     beforeAll(async () => {
       next = await createNext({
         files: {
-          'pages/index.js': `
-            export default function Page() {
-              return (
-                <div>
-                  <style jsx>{'p { color: red; }'}</style>
-                  <p>hello world</p>
-                </div>
-              )
-            }
-          `,
+          pages: new FileRef(path.join(appDir, 'pages')),
+          // 'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
         },
+
+        // files: {
+        //   'pages/index.js': `
+        //     export default function Page() {
+        //       return (
+        //         <div>
+        //           <style jsx>{'p { color: red; }'}</style>
+        //           <p>hello world</p>
+        //         </div>
+        //       )
+        //     }
+        //   `,
+        // },
         ...(packageManager
           ? {
               installCommand: `npx ${packageManager} install`,
@@ -33,7 +41,8 @@ function runTest(packageManager?: string) {
     it('should contain styled-jsx styles in html', async () => {
       const html = await renderViaHTTP(next.url, '/')
       const $ = cheerio.load(html)
-      expect($('head').text()).toContain('color:red')
+      const body = $('body').text()
+      expect(body).toMatch(/color:(\s)*red/)
     })
   })
 }