From 4e20a12e890defce24d96df365e5619398c4685b Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Mon, 2 May 2022 22:19:33 +0200 Subject: [PATCH] ensure styles are flushed inside the default getInitialProps --- packages/next/server/render.tsx | 10 +++------- test/e2e/styled-jsx/index.test.ts | 3 +-- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx index e017e564ca28..f38083b00d1b 100644 --- a/packages/next/server/render.tsx +++ b/packages/next/server/render.tsx @@ -90,7 +90,6 @@ let warn: typeof import('../build/output/log').warn let postProcess: typeof import('../shared/lib/post-process').default const DOCTYPE = '' -const GIP_GEN_STYLES = '__GIP_GEN_STYLES__' const ReactDOMServer = process.env.__NEXT_REACT_ROOT ? require('react-dom/server.browser') : require('react-dom/server') @@ -772,7 +771,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 + jsxStyleRegistry.flush() return { html, head, styles } }, } @@ -1577,12 +1576,9 @@ export async function renderToHTML( return } - let styles: any[] + let styles if (hasDocumentGetInitialProps) { - // 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 = docProps.styles[GIP_GEN_STYLES] ? [] : docProps.styles + styles = docProps.styles } else { styles = jsxStyleRegistry.styles() jsxStyleRegistry.flush() diff --git a/test/e2e/styled-jsx/index.test.ts b/test/e2e/styled-jsx/index.test.ts index 189a37c79785..c0f52f658ff9 100644 --- a/test/e2e/styled-jsx/index.test.ts +++ b/test/e2e/styled-jsx/index.test.ts @@ -27,8 +27,7 @@ function runTest(packageManager?: string) { it('should contain styled-jsx styles in html', async () => { const html = await renderViaHTTP(next.url, '/') const $ = cheerio.load(html) - const isReact17 = process.env.NEXT_TEST_REACT_VERSION === '^17' - expect($(isReact17 ? 'head' : 'body').text()).toMatch(/color:(\s)*red/) + expect($('html').text()).toMatch(/color:(\s)*red/) }) }) }