From 9b0c641b2593a6a594b4c7aec91c5cf86eae3478 Mon Sep 17 00:00:00 2001
From: Luc <luc.leray@gmail.com>
Date: Thu, 19 Sep 2019 22:53:32 +0800
Subject: [PATCH] Insert <style> tags after anchor element (#8795)

* insert css *after* noscript tag in dev mode

* use arrow function
---
 packages/next/build/webpack-config.ts | 30 +++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 95a7c8359dac..96df3a30ef4f 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -564,10 +564,32 @@ export default async function getBaseWebpackConfig(
                     options: {
                       // By default, style-loader injects CSS into the bottom
                       // of <head>. This causes ordering problems between dev
-                      // and prod. To fix this, we render a <noscript> tag for
-                      // the styles to be placed within. These styles will be
-                      // applied _before_ <style jsx global>.
-                      insert: `#__next_css__DO_NOT_USE__`,
+                      // and prod. To fix this, we render a <noscript> tag as
+                      // an "anchor" for the styles to be placed after. These
+                      // styles will be applied _before_ <style jsx global>.
+                      insert: (element: Node) => {
+                        const parent = document.querySelector('head') as Element
+                        const anchor = document.querySelector(
+                          '#__next_css__DO_NOT_USE__'
+                        )
+
+                        // @ts-ignore
+                        const lastInsert = window.__lastInsertedByStyleLoader
+
+                        if (lastInsert && lastInsert.nextSibling) {
+                          // if a style element was already inserted, insert after
+                          parent.insertBefore(element, lastInsert.nextSibling)
+                        } else if (anchor && anchor.nextSibling) {
+                          // else, insert after the anchor
+                          parent.insertBefore(element, anchor.nextSibling)
+                        } else {
+                          // fallback to inserting in last position into head
+                          parent.appendChild(element)
+                        }
+
+                        // @ts-ignore
+                        window.__lastInsertedByStyleLoader = element
+                      },
                     },
                   },
                   // When building for production we extract CSS into
