vercel · Timer · Apr 15, 2020 · Apr 15, 2020 · Apr 15, 2020 · Apr 15, 2020
diff --git a/packages/next/build/webpack/config/blocks/css/loaders/client.ts b/packages/next/build/webpack/config/blocks/css/loaders/client.ts
@@ -17,18 +17,16 @@ export function getClientStyleLoader({
           // and prod. To fix this, we render a <noscript> tag as
           // an anchor for the styles to be placed before. These
           // styles will be applied _before_ <style jsx global>.
-          insert: function(element: Node) {
+          insert: function(element: Element) {
             // These elements should always exist. If they do not,
             // this code should fail.
             var anchorElement = document.querySelector(
               '#__next_css__DO_NOT_USE__'
             )!
-            var parentNode = anchorElement.parentNode! // Normally <head>
 
-            // Each style tag should be placed right before our
-            // anchor. By inserting before and not after, we do not
-            // need to track the last inserted element.
-            parentNode.insertBefore(element, anchorElement)
+            // Append each script element immediately after the placeholder.
+            // This ensures the correct ordering of CSS as to match production.
+            anchorElement.insertAdjacentElement('afterend', element)
 
             // Remember: this is development only code.
             //

diff --git a/test/integration/css-fixtures/global-and-module-ordering/pages/_app.js b/test/integration/css-fixtures/global-and-module-ordering/pages/_app.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import App from 'next/app'
+import '../styles/global.css'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp
diff --git a/test/integration/css-fixtures/global-and-module-ordering/pages/index.js b/test/integration/css-fixtures/global-and-module-ordering/pages/index.js
@@ -0,0 +1,9 @@
+import styles from './index.module.css'
+
+export default function Home() {
+  return (
+    <div id="blueText" className={`${styles.textModule} textGlobal`}>
+      This text should be blue.
+    </div>
+  )
+}
diff --git a/test/integration/css-fixtures/global-and-module-ordering/pages/index.module.css b/test/integration/css-fixtures/global-and-module-ordering/pages/index.module.css
@@ -0,0 +1,3 @@
+.textModule {
+  color: blue;
+}
diff --git a/test/integration/css-fixtures/global-and-module-ordering/styles/global.css b/test/integration/css-fixtures/global-and-module-ordering/styles/global.css
@@ -0,0 +1,3 @@
+.textGlobal {
+  color: red;
+}
diff --git a/test/integration/css/test/index.test.js b/test/integration/css/test/index.test.js
@@ -806,6 +806,64 @@ describe('CSS Support', () => {
     })
   })
 
+  describe('Ordering with Global CSS and Modules (dev)', () => {
+    const appDir = join(fixturesDir, 'global-and-module-ordering')
+
+    let appPort
+    let app
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+    })
+
+    it('should have the correct color (css ordering)', async () => {
+      const browser = await webdriver(appPort, '/')
+
+      const currentColor = await browser.eval(
+        `window.getComputedStyle(document.querySelector('#blueText')).color`
+      )
+      expect(currentColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`)
+    })
+  })
+
+  describe('Ordering with Global CSS and Modules (prod)', () => {
+    const appDir = join(fixturesDir, 'global-and-module-ordering')
+
+    let appPort
+    let app
+    let stdout
+    let code
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+      ;({ code, stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      }))
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+    })
+
+    it('should have compiled successfully', () => {
+      expect(code).toBe(0)
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+
+    it('should have the correct color (css ordering)', async () => {
+      const browser = await webdriver(appPort, '/')
+
+      const currentColor = await browser.eval(
+        `window.getComputedStyle(document.querySelector('#blueText')).color`
+      )
+      expect(currentColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`)
+    })
+  })
+
   describe('Basic Tailwind CSS', () => {
     const appDir = join(fixturesDir, 'with-tailwindcss')