diff --git a/test/integration/css-fixtures/next-issue-12343/components/button.jsx b/test/integration/css-fixtures/next-issue-12343/components/button.jsx
new file mode 100644
index 0000000000000..6d4442b69b1ed
--- /dev/null
+++ b/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 }) => (
+
+)
diff --git a/test/integration/css-fixtures/next-issue-12343/components/button.module.css b/test/integration/css-fixtures/next-issue-12343/components/button.module.css
new file mode 100644
index 0000000000000..dcffeaaf4b3f1
--- /dev/null
+++ b/test/integration/css-fixtures/next-issue-12343/components/button.module.css
@@ -0,0 +1,3 @@
+.button {
+ background: hotpink;
+}
diff --git a/test/integration/css-fixtures/next-issue-12343/pages/another-page.js b/test/integration/css-fixtures/next-issue-12343/pages/another-page.js
new file mode 100644
index 0000000000000..7b40a60c4bac4
--- /dev/null
+++ b/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 (
+
+
Another page
+
+
+
+
+ )
+}
+
+export default AnotherPage
diff --git a/test/integration/css-fixtures/next-issue-12343/pages/homepage.module.css b/test/integration/css-fixtures/next-issue-12343/pages/homepage.module.css
new file mode 100644
index 0000000000000..1dfa11f18bec8
--- /dev/null
+++ b/test/integration/css-fixtures/next-issue-12343/pages/homepage.module.css
@@ -0,0 +1,3 @@
+.button {
+ background: lime;
+}
diff --git a/test/integration/css-fixtures/next-issue-12343/pages/index.js b/test/integration/css-fixtures/next-issue-12343/pages/index.js
new file mode 100644
index 0000000000000..0844001c4e41a
--- /dev/null
+++ b/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 (
+
+
Home page
+
+
+
+
+ )
+}
+
+export default HomePage
diff --git a/test/integration/css/test/index.test.js b/test/integration/css/test/index.test.js
index ebc76164b99c3..a84ec9bf3fbdd 100644
--- a/test/integration/css/test/index.test.js
+++ b/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()
+ })
+ })
})