From 1c086701b8710e7bc012c7be56ba07df445a6c13 Mon Sep 17 00:00:00 2001
From: sparker <scott.p.parker@gmail.com>
Date: Tue, 14 Apr 2020 21:49:10 -0500
Subject: [PATCH 1/3] Global styles now load before local in dev

---
 .../config/blocks/css/loaders/client.ts       | 11 +++--
 .../global-and-module/pages/_app.js           | 12 ++++++
 .../global-and-module/pages/index.js          |  5 +++
 .../global-and-module/pages/index.module.css  |  3 ++
 .../global-and-module/styles/global.css       |  3 ++
 test/integration/css/test/index.test.js       | 42 +++++++++++++++++++
 6 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 test/integration/css-fixtures/global-and-module/pages/_app.js
 create mode 100644 test/integration/css-fixtures/global-and-module/pages/index.js
 create mode 100644 test/integration/css-fixtures/global-and-module/pages/index.module.css
 create mode 100644 test/integration/css-fixtures/global-and-module/styles/global.css
diff --git a/packages/next/build/webpack/config/blocks/css/loaders/client.ts b/packages/next/build/webpack/config/blocks/css/loaders/client.ts
index ab3024c05c561..0db5ea05b5c70 100644
--- 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,17 @@ 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
+            // placholder. This preserves the ordering of CSS
+            // modules relative to production.
+            anchorElement.insertAdjacentElement('afterend', element);
 
             // Remember: this is development only code.
             //
diff --git a/test/integration/css-fixtures/global-and-module/pages/_app.js b/test/integration/css-fixtures/global-and-module/pages/_app.js
new file mode 100644
index 0000000000000..17a2196742e95
--- /dev/null
+++ b/test/integration/css-fixtures/global-and-module/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/pages/index.js b/test/integration/css-fixtures/global-and-module/pages/index.js
new file mode 100644
index 0000000000000..17631264ee2fd
--- /dev/null
+++ b/test/integration/css-fixtures/global-and-module/pages/index.js
@@ -0,0 +1,5 @@
+import styles from './index.module.css';
+
+export default function Home() {
+  return <div id="blueText" className={`${styles.textModule} textGlobal`}>This text should be blue.</div>
+}
\ No newline at end of file
diff --git a/test/integration/css-fixtures/global-and-module/pages/index.module.css b/test/integration/css-fixtures/global-and-module/pages/index.module.css
new file mode 100644
index 0000000000000..dc53ec66ee295
--- /dev/null
+++ b/test/integration/css-fixtures/global-and-module/pages/index.module.css
@@ -0,0 +1,3 @@
+.textModule {
+  color: blue;
+}
\ No newline at end of file
diff --git a/test/integration/css-fixtures/global-and-module/styles/global.css b/test/integration/css-fixtures/global-and-module/styles/global.css
new file mode 100644
index 0000000000000..6d515b9f7dbf6
--- /dev/null
+++ b/test/integration/css-fixtures/global-and-module/styles/global.css
@@ -0,0 +1,3 @@
+.textGlobal {
+  color: red;
+}
\ No newline at end of file
diff --git a/test/integration/css/test/index.test.js b/test/integration/css/test/index.test.js
index e6fb9e0431a6b..087695d4338eb 100644
--- a/test/integration/css/test/index.test.js
+++ b/test/integration/css/test/index.test.js
@@ -77,6 +77,48 @@ describe('CSS Support', () => {
     })
   })
 
+  describe('Global styles load before module styles', () => {
+    const appDir = join(fixturesDir, 'global-and-module')
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    let appPort
+    let app
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+    })
+
+    it('should compile successfully', async () => {
+      const { code, stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      })
+      expect(code).toBe(0)
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+
+    it('should have correctly ordered script tags', async () => {
+      let browser
+      try {
+        browser = await webdriver(appPort, '/')
+
+        const currentColor = await browser.eval(
+          `window.getComputedStyle(document.querySelector('#blueText')).color`
+        )
+        expect(currentColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`)
+      } finally {
+        if (browser) {
+          await browser.close()
+        }
+      }
+    })
+  })
+
   describe('Multi Global Support', () => {
     const appDir = join(fixturesDir, 'multi-global')
 

From 00bf0c2e2566ff9f0398a9c6f3abedece15639af Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Wed, 15 Apr 2020 02:09:11 -0400
Subject: [PATCH 2/3] fix lint

---
 .../build/webpack/config/blocks/css/loaders/client.ts  |  7 +++----
 .../css-fixtures/global-and-module/pages/index.js      | 10 +++++++---
 .../global-and-module/pages/index.module.css           |  2 +-
 .../css-fixtures/global-and-module/styles/global.css   |  2 +-
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/next/build/webpack/config/blocks/css/loaders/client.ts b/packages/next/build/webpack/config/blocks/css/loaders/client.ts
index 0db5ea05b5c70..ecdac3e19d128 100644
--- a/packages/next/build/webpack/config/blocks/css/loaders/client.ts
+++ b/packages/next/build/webpack/config/blocks/css/loaders/client.ts
@@ -24,10 +24,9 @@ export function getClientStyleLoader({
               '#__next_css__DO_NOT_USE__'
             )!
 
-            // Append each script element immediately after the
-            // placholder. This preserves the ordering of CSS
-            // modules relative to production.
-            anchorElement.insertAdjacentElement('afterend', element);
+            // 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/pages/index.js b/test/integration/css-fixtures/global-and-module/pages/index.js
index 17631264ee2fd..639afdddb3814 100644
--- a/test/integration/css-fixtures/global-and-module/pages/index.js
+++ b/test/integration/css-fixtures/global-and-module/pages/index.js
@@ -1,5 +1,9 @@
-import styles from './index.module.css';
+import styles from './index.module.css'
 
 export default function Home() {
-  return <div id="blueText" className={`${styles.textModule} textGlobal`}>This text should be blue.</div>
-}
\ No newline at end of file
+  return (
+    <div id="blueText" className={`${styles.textModule} textGlobal`}>
+      This text should be blue.
+    </div>
+  )
+}
diff --git a/test/integration/css-fixtures/global-and-module/pages/index.module.css b/test/integration/css-fixtures/global-and-module/pages/index.module.css
index dc53ec66ee295..4705572083ce4 100644
--- a/test/integration/css-fixtures/global-and-module/pages/index.module.css
+++ b/test/integration/css-fixtures/global-and-module/pages/index.module.css
@@ -1,3 +1,3 @@
 .textModule {
   color: blue;
-}
\ No newline at end of file
+}
diff --git a/test/integration/css-fixtures/global-and-module/styles/global.css b/test/integration/css-fixtures/global-and-module/styles/global.css
index 6d515b9f7dbf6..533b2db263813 100644
--- a/test/integration/css-fixtures/global-and-module/styles/global.css
+++ b/test/integration/css-fixtures/global-and-module/styles/global.css
@@ -1,3 +1,3 @@
 .textGlobal {
   color: red;
-}
\ No newline at end of file
+}

From c98b43475723916d6ca4e92ecca7bc1f0f9a870e Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Wed, 15 Apr 2020 02:13:48 -0400
Subject: [PATCH 3/3] Adjust tests

---
 .../pages/_app.js                             |   0
 .../pages/index.js                            |   0
 .../pages/index.module.css                    |   0
 .../styles/global.css                         |   0
 test/integration/css/test/index.test.js       | 100 ++++++++++--------
 5 files changed, 58 insertions(+), 42 deletions(-)
 rename test/integration/css-fixtures/{global-and-module => global-and-module-ordering}/pages/_app.js (100%)
 rename test/integration/css-fixtures/{global-and-module => global-and-module-ordering}/pages/index.js (100%)
 rename test/integration/css-fixtures/{global-and-module => global-and-module-ordering}/pages/index.module.css (100%)
 rename test/integration/css-fixtures/{global-and-module => global-and-module-ordering}/styles/global.css (100%)

diff --git a/test/integration/css-fixtures/global-and-module/pages/_app.js b/test/integration/css-fixtures/global-and-module-ordering/pages/_app.js
similarity index 100%
rename from test/integration/css-fixtures/global-and-module/pages/_app.js
rename to test/integration/css-fixtures/global-and-module-ordering/pages/_app.js
diff --git a/test/integration/css-fixtures/global-and-module/pages/index.js b/test/integration/css-fixtures/global-and-module-ordering/pages/index.js
similarity index 100%
rename from test/integration/css-fixtures/global-and-module/pages/index.js
rename to test/integration/css-fixtures/global-and-module-ordering/pages/index.js
diff --git a/test/integration/css-fixtures/global-and-module/pages/index.module.css b/test/integration/css-fixtures/global-and-module-ordering/pages/index.module.css
similarity index 100%
rename from test/integration/css-fixtures/global-and-module/pages/index.module.css
rename to test/integration/css-fixtures/global-and-module-ordering/pages/index.module.css
diff --git a/test/integration/css-fixtures/global-and-module/styles/global.css b/test/integration/css-fixtures/global-and-module-ordering/styles/global.css
similarity index 100%
rename from test/integration/css-fixtures/global-and-module/styles/global.css
rename to test/integration/css-fixtures/global-and-module-ordering/styles/global.css
diff --git a/test/integration/css/test/index.test.js b/test/integration/css/test/index.test.js
index 087695d4338eb..f58dc002caaa7 100644
--- a/test/integration/css/test/index.test.js
+++ b/test/integration/css/test/index.test.js
@@ -77,48 +77,6 @@ describe('CSS Support', () => {
     })
   })
 
-  describe('Global styles load before module styles', () => {
-    const appDir = join(fixturesDir, 'global-and-module')
-
-    beforeAll(async () => {
-      await remove(join(appDir, '.next'))
-    })
-
-    let appPort
-    let app
-    beforeAll(async () => {
-      appPort = await findPort()
-      app = await launchApp(appDir, appPort)
-    })
-    afterAll(async () => {
-      await killApp(app)
-    })
-
-    it('should compile successfully', async () => {
-      const { code, stdout } = await nextBuild(appDir, [], {
-        stdout: true,
-      })
-      expect(code).toBe(0)
-      expect(stdout).toMatch(/Compiled successfully/)
-    })
-
-    it('should have correctly ordered script tags', async () => {
-      let browser
-      try {
-        browser = await webdriver(appPort, '/')
-
-        const currentColor = await browser.eval(
-          `window.getComputedStyle(document.querySelector('#blueText')).color`
-        )
-        expect(currentColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`)
-      } finally {
-        if (browser) {
-          await browser.close()
-        }
-      }
-    })
-  })
-
   describe('Multi Global Support', () => {
     const appDir = join(fixturesDir, 'multi-global')
 
@@ -848,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')
 
