Insert <style> tags after anchor element (#8795)

* insert css *after* noscript tag in dev mode * use arrow function
vercel · Sep 19, 2019 · 9b0c641 · 9b0c641
1 parent 0eda4d5
commit 9b0c641
Showing 1 changed file with 26 additions and 4 deletions.
diff --git 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