Test that cross-page styles do not apply

package.json

@@ -68,6 +68,7 @@
     "browserslist": "^4.14.7",
     "browserstack-local": "1.4.0",
     "cheerio": "0.22.0",
+    "classnames": "2.2.6",
     "clone": "2.1.2",
     "cookie": "0.4.1",
     "cors": "2.8.5",

test/integration/css-fixtures/next-issue-15284/components/Banner/Banner.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import Link from 'next/link'
+import cx from 'classnames'
+import styles from './Banner.module.css'
+
+const Banner = ({ id, className, href }) => {
+  return (
+    <div id={`hero-${id}`} className={cx(styles.Banner, className)}>
+      <h1 style={{ margin: 0, padding: '2rem' }}>This is a test</h1>
+
+      <Link href={href}>
+        <a id={`link-${id}`} style={{ margin: 0, padding: '2rem' }}>
+          Other Page
+        </a>
+      </Link>
+    </div>
+  )
+}
+
+export default Banner

test/integration/css-fixtures/next-issue-15284/components/Banner/Banner.module.css

@@ -0,0 +1,5 @@
+.Banner {
+  height: 100vh;
+  width: 100vw;
+  background-color: #639;
+}

test/integration/css-fixtures/next-issue-15284/pages/_app.js

@@ -0,0 +1,8 @@
+// global CSS
+import './styles/globalStyles.css'
+
+function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default App

test/integration/css-fixtures/next-issue-15284/pages/index.js

@@ -0,0 +1,6 @@
+import styles from './styles/index.module.css'
+import Banner from '../components/Banner/Banner'
+
+export default function Index() {
+  return <Banner id="home" className={styles.bannerOverride} href="/test" />
+}

test/integration/css-fixtures/next-issue-15284/pages/styles/globalStyles.css

@@ -0,0 +1,8 @@
+body {
+  margin: 0;
+}
+
+* {
+  box-sizing: border-box;
+  color: white;
+}

test/integration/css-fixtures/next-issue-15284/pages/styles/index.module.css

@@ -0,0 +1,5 @@
+.bannerOverride {
+  height: 50vh;
+  border: 1px solid red;
+  background-color: #ff6347;
+}

test/integration/css-fixtures/next-issue-15284/pages/test.js

@@ -0,0 +1,5 @@
+import Banner from '../components/Banner/Banner'
+
+export default function Test() {
+  return <Banner id="other" href="/" />
+}

test/integration/css/test/index.test.js

@@ -1826,4 +1826,97 @@ describe('CSS Support', () => {
       }
     })
   })
+
+  // https://github.com/vercel/next.js/issues/15284
+  describe('CSS Page Ordering', () => {
+    const appDir = join(fixturesDir, 'next-issue-15284')
+    let app, appPort
+
+    function tests() {
+      async function checkTomatoBackground(browser) {
+        await browser.waitForElementByCss('#hero-home')
+        const titleColor = await browser.eval(
+          `window.getComputedStyle(document.querySelector('#hero-home')).backgroundColor`
+        )
+        expect(titleColor).toBe('rgb(255, 99, 71)')
+      }
+      async function checkRebeccaPurpleBackground(browser) {
+        await browser.waitForElementByCss('#hero-other')
+        const titleColor = await browser.eval(
+          `window.getComputedStyle(document.querySelector('#hero-other')).backgroundColor`
+        )
+        expect(titleColor).toBe('rgb(102, 51, 153)')
+      }
+
+      it('should have correct color on index page (on load)', async () => {
+        const browser = await webdriver(appPort, '/')
+        try {
+          await checkTomatoBackground(browser)
+        } finally {
+          await browser.close()
+        }
+      })
+
+      it('should have correct color on index page (on hover)', async () => {
+        const browser = await webdriver(appPort, '/')
+        try {
+          await checkTomatoBackground(browser)
+          await browser.waitForElementByCss('#link-home').moveTo()
+          await waitFor(2000)
+          await checkTomatoBackground(browser)
+        } finally {
+          await browser.close()
+        }
+      })
+
+      it('should have correct color on index page (on nav)', async () => {
+        const browser = await webdriver(appPort, '/')
+        try {
+          await checkTomatoBackground(browser)
+          await browser.waitForElementByCss('#link-home').click()
+
+          // Wait for navigation:
+          await browser.waitForElementByCss('#link-other')
+          await checkRebeccaPurpleBackground(browser)
+
+          // Navigate back to index:
+          await browser.waitForElementByCss('#link-other').click()
+          await checkTomatoBackground(browser)
+        } finally {
+          await browser.close()
+        }
+      })
+    }
+
+    describe('Development Mode', () => {
+      beforeAll(async () => {
+        await remove(join(appDir, '.next'))
+      })
+      beforeAll(async () => {
+        appPort = await findPort()
+        app = await launchApp(appDir, appPort)
+      })
+      afterAll(async () => {
+        await killApp(app)
+      })
+
+      tests()
+    })
+
+    describe('Production Mode', () => {
+      beforeAll(async () => {
+        await remove(join(appDir, '.next'))
+      })
+      beforeAll(async () => {
+        await nextBuild(appDir, [], {})
+        appPort = await findPort()
+        app = await nextStart(appDir, appPort)
+      })
+      afterAll(async () => {
+        await killApp(app)
+      })
+
+      tests()
+    })
+  })
 })

yarn.lock

@@ -4756,6 +4756,7 @@ class-utils@^0.3.5:
 [email protected]:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
 clean-stack@^2.0.0:
   version "2.2.0"