Correct Global and Local CSS Loading Order in Dev (#11901)

* Global styles now load before local in dev * fix lint * Adjust tests Co-authored-by: N Joe Haddad <joe.haddad@zeit.co>

Correct Global and Local CSS Loading Order in Dev (#11901)
* Global styles now load before local in dev * fix lint * Adjust tests Co-authored-by: N Joe Haddad <joe.haddad@zeit.co>
67e6cae4 · Scott Parker · GitHub · 2b488ab1 · 67e6cae4 · 67e6cae4
6 changed file
--- 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.
            //

--- a/test/integration/css-fixtures/global-and-module-ordering/pages/_app.js
+++ b/test/integration/css-fixtures/global-and-module-ordering/pages/_app.js
+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
--- a/test/integration/css-fixtures/global-and-module-ordering/pages/index.js
+++ b/test/integration/css-fixtures/global-and-module-ordering/pages/index.js
+import styles from './index.module.css'
+
+export default function Home() {
+  return (
+    <div id="blueText" className={`${styles.textModule} textGlobal`}>
+      This text should be blue.
+    </div>
+  )
+}
--- 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
+.textModule {
+  color: blue;
+}
--- a/test/integration/css-fixtures/global-and-module-ordering/styles/global.css
+++ b/test/integration/css-fixtures/global-and-module-ordering/styles/global.css
+.textGlobal {
+  color: red;
+}
--- 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')