Test basic css module prefetching without compose (#16134)

test/integration/css-fixtures/next-issue-12343/components/button.jsx

@@ -0,0 +1,5 @@
+import styles from './button.module.css'
+
+export const Button = ({ className, ...rest }) => (
+  <a className={`${styles.button} ${className}`} {...rest} />
+)

test/integration/css-fixtures/next-issue-12343/components/button.module.css

@@ -0,0 +1,3 @@
+.button {
+  background: hotpink;
+}

test/integration/css-fixtures/next-issue-12343/pages/another-page.js

@@ -0,0 +1,15 @@
+import { Button } from '../components/button'
+import Link from 'next/link'
+
+function AnotherPage() {
+  return (
+    <div>
+      <h1>Another page</h1>
+      <Link href="/">
+        <Button id="link-index">Another Button instance</Button>
+      </Link>
+    </div>
+  )
+}
+
+export default AnotherPage

test/integration/css-fixtures/next-issue-12343/pages/homepage.module.css

@@ -0,0 +1,3 @@
+.button {
+  background: lime;
+}

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

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+import { Button } from '../components/button'
+import styles from './homepage.module.css'
+
+function HomePage() {
+  return (
+    <div>
+      <h1>Home page</h1>
+      <Link href="/another-page">
+        <Button id="link-other" className={styles.button}>
+          Another page
+        </Button>
+      </Link>
+    </div>
+  )
+}
+
+export default HomePage

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

@@ -1396,4 +1396,97 @@ describe('CSS Support', () => {
       tests()
     })
   })
+
+  // https://github.com/vercel/next.js/issues/12343
+  describe('Basic CSS Modules Ordering', () => {
+    const appDir = join(fixturesDir, 'next-issue-12343')
+    let app, appPort
+
+    function tests() {
+      async function checkGreenButton(browser) {
+        await browser.waitForElementByCss('#link-other')
+        const titleColor = await browser.eval(
+          `window.getComputedStyle(document.querySelector('#link-other')).backgroundColor`
+        )
+        expect(titleColor).toBe('rgb(0, 255, 0)')
+      }
+      async function checkPinkButton(browser) {
+        await browser.waitForElementByCss('#link-index')
+        const titleColor = await browser.eval(
+          `window.getComputedStyle(document.querySelector('#link-index')).backgroundColor`
+        )
+        expect(titleColor).toBe('rgb(255, 105, 180)')
+      }
+
+      it('should have correct color on index page (on load)', async () => {
+        const browser = await webdriver(appPort, '/')
+        try {
+          await checkGreenButton(browser)
+        } finally {
+          await browser.close()
+        }
+      })
+
+      it('should have correct color on index page (on hover)', async () => {
+        const browser = await webdriver(appPort, '/')
+        try {
+          await checkGreenButton(browser)
+          await browser.waitForElementByCss('#link-other').moveTo()
+          await waitFor(2000)
+          await checkGreenButton(browser)
+        } finally {
+          await browser.close()
+        }
+      })
+
+      it('should have correct color on index page (on nav)', async () => {
+        const browser = await webdriver(appPort, '/')
+        try {
+          await checkGreenButton(browser)
+          await browser.waitForElementByCss('#link-other').click()
+
+          // Wait for navigation:
+          await browser.waitForElementByCss('#link-index')
+          await checkPinkButton(browser)
+
+          // Navigate back to index:
+          await browser.waitForElementByCss('#link-index').click()
+          await checkGreenButton(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()
+    })
+  })
 })