Handle dynamic css-in-js styles under suspense

package.json

@@ -195,7 +195,7 @@
     "selenium-webdriver": "4.0.0-beta.4",
     "semver": "7.3.7",
     "shell-quote": "1.7.3",
-    "styled-components": "5.3.3",
+    "styled-components": "6.0.0-beta.5",
     "styled-jsx-plugin-postcss": "3.0.2",
     "swr": "2.0.0-rc.0",
     "tailwindcss": "1.1.3",

packages/next/server/node-web-streams-helper.ts

@@ -149,19 +149,44 @@ export function renderToInitialStream({
   return ReactDOMServer.renderToReadableStream(element, streamOptions)
 }
 
-export function createHeadInjectionTransformStream(
-  inject: () => Promise<string>
+function createHeadInsertionTransformStream(
+  insert: () => Promise<string>
 ): TransformStream<Uint8Array, Uint8Array> {
-  let injected = false
+  let inserted = false
+  let freezing = false
+  const queueTask =
+    process.env.NEXT_RUNTIME === 'edge' ? globalThis.setTimeout : setImmediate
   return new TransformStream({
     async transform(chunk, controller) {
       const content = decodeText(chunk)
       let index
-      if (!injected && (index = content.indexOf('</head')) !== -1) {
-        injected = true
-        const injectedContent =
-          content.slice(0, index) + (await inject()) + content.slice(index)
-        controller.enqueue(encodeText(injectedContent))
+      // While react is flushing chunks, we don't apply insertions
+      if (freezing) {
+        controller.enqueue(chunk)
+        return
+      }
+      if (inserted) {
+        // Insert the subsequent insertion content to end of body.
+        freezing = true
+        const insertion = await insert()
+        controller.enqueue(encodeText(insertion))
+        controller.enqueue(chunk)
+        // Queue a task to wait for react flushing chunks in microtasks,
+        // to avoid content being messed up with style tags together.
+        queueTask(() => {
+          freezing = false
+        })
+      } else if ((index = content.indexOf('</head')) !== -1) {
+        // When there's head element detected, insert into head element
+        freezing = true
+        const insertion = await insert()
+        const insertedHeadContent =
+          content.slice(0, index) + insertion + content.slice(index)
+        controller.enqueue(encodeText(insertedHeadContent))
+        inserted = true
+        queueTask(() => {
+          freezing = false
+        })
       } else {
         controller.enqueue(chunk)
       }
@@ -333,7 +358,7 @@ export async function continueFromInitialStream(
     suffixUnclosed != null ? createDeferredSuffixStream(suffixUnclosed) : null,
     dataStream ? createInlineDataStream(dataStream) : null,
     suffixUnclosed != null ? createSuffixStream(closeTag) : null,
-    createHeadInjectionTransformStream(async () => {
+    createHeadInsertionTransformStream(async () => {
       // TODO-APP: Insert server side html to end of head in app layout rendering, to avoid
       // hydration errors. Remove this once it's ready to be handled by react itself.
       const serverInsertedHTML =