fix css duplication in app dir

vercel · sokra · Feb 7, 2024 · Jan 26, 2024 · Jan 26, 2024 · Jan 26, 2024
commit e5f2369fe463932f10616f5a0aa8dec0337ec8ad
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -974,6 +974,14 @@ export default async function getBaseWebpackConfig(
           chunks: (chunk: any) =>
             !/^(polyfills|main|pages\/_app)$/.test(chunk.name),
           cacheGroups: {
+            css: {
+              test: /\.(css|sass|scss)$/i,
+              chunks: 'all',
+              enforce: true,
+              type: /css/,
+              minChunks: 2,
+              priority: 100,
+            },
             framework: {
               chunks: 'all',
               name: 'framework',

diff --git a/test/e2e/app-dir/css-order/app/base-scss.module.scss b/test/e2e/app-dir/css-order/app/base-scss.module.scss
@@ -0,0 +1,5 @@
+$base1: rgb(255, 1, 0);
+
+.base {
+  color: $base1;
+}
diff --git a/test/e2e/app-dir/css-order/app/base.module.css b/test/e2e/app-dir/css-order/app/base.module.css
@@ -0,0 +1,3 @@
+.base {
+  color: rgb(255, 0, 0);
+}
diff --git a/test/e2e/app-dir/css-order/app/base2-scss.module.scss b/test/e2e/app-dir/css-order/app/base2-scss.module.scss
@@ -0,0 +1,3 @@
+.base {
+  color: rgb(255, 3, 0);
+}
diff --git a/test/e2e/app-dir/css-order/app/base2.module.css b/test/e2e/app-dir/css-order/app/base2.module.css
@@ -0,0 +1,3 @@
+.base {
+  color: rgb(255, 2, 0);
+}
diff --git a/test/e2e/app-dir/css-order/app/first-client/page.tsx b/test/e2e/app-dir/css-order/app/first-client/page.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import Link from 'next/link'
+import baseStyle from '../base2.module.css'
+import baseStyle2 from '../base2-scss.module.scss'
+import style from './style.module.css'
+
+export default function Page() {
+  return (
+    <div>
+      <p
+        className={`${style.name} ${baseStyle.base} ${baseStyle2.base}`}
+        id="hello1c"
+      >
+        hello world
+      </p>
+      <Link href={'/first'} id="first">
+        First
+      </Link>
+      <Link href={'/first-client'} id="first-client">
+        First client
+      </Link>
+      <Link href={'/second'} id="second">
+        Second
+      </Link>
+      <Link href={'/second-client'} id="second-client">
+        Second client
+      </Link>
+      <Link href={'/third'} id="third">
+        Third
+      </Link>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/css-order/app/first-client/style.module.css b/test/e2e/app-dir/css-order/app/first-client/style.module.css
@@ -0,0 +1,4 @@
+.name {
+  composes: base from '../base.module.css';
+  color: rgb(255, 0, 255);
+}
diff --git a/test/e2e/app-dir/css-order/app/first/page.tsx b/test/e2e/app-dir/css-order/app/first/page.tsx
@@ -0,0 +1,32 @@
+import Link from 'next/link'
+import baseStyle from '../base2.module.css'
+import baseStyle2 from '../base2-scss.module.scss'
+import style from './style.module.css'
+
+export default function Page() {
+  return (
+    <div>
+      <p
+        className={`${style.name} ${baseStyle.base} ${baseStyle2.base}`}
+        id="hello1"
+      >
+        hello world
+      </p>
+      <Link href={'/first'} id="first">
+        First
+      </Link>
+      <Link href={'/first-client'} id="first-client">
+        First client
+      </Link>
+      <Link href={'/second'} id="second">
+        Second
+      </Link>
+      <Link href={'/second-client'} id="second-client">
+        Second client
+      </Link>
+      <Link href={'/third'} id="third">
+        Third
+      </Link>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/css-order/app/first/style.module.css b/test/e2e/app-dir/css-order/app/first/style.module.css
@@ -0,0 +1,4 @@
+.name {
+  composes: base from '../base.module.css';
+  color: blue;
+}
diff --git a/test/e2e/app-dir/css-order/app/layout.tsx b/test/e2e/app-dir/css-order/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/css-order/app/page.tsx b/test/e2e/app-dir/css-order/app/page.tsx
@@ -0,0 +1,11 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <p>hello world</p>
+      <Link href={'/first'}>First</Link>
+      <Link href={'/second'}>Second</Link>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/css-order/app/second-client/page.tsx b/test/e2e/app-dir/css-order/app/second-client/page.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import Link from 'next/link'
+import baseStyle from '../base2.module.css'
+import baseStyle2 from '../base2-scss.module.scss'
+import style from './style.module.css'
+
+export default function Page() {
+  return (
+    <div>
+      <p
+        className={`${style.name} ${baseStyle.base} ${baseStyle2.base}`}
+        id="hello2c"
+      >
+        hello world
+      </p>
+      <Link href={'/first'} id="first">
+        First
+      </Link>
+      <Link href={'/first-client'} id="first-client">
+        First client
+      </Link>
+      <Link href={'/second'} id="second">
+        Second
+      </Link>
+      <Link href={'/second-client'} id="second-client">
+        Second client
+      </Link>
+      <Link href={'/third'} id="third">
+        Third
+      </Link>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/css-order/app/second-client/style.module.css b/test/e2e/app-dir/css-order/app/second-client/style.module.css
@@ -0,0 +1,4 @@
+.name {
+  composes: base from '../base.module.css';
+  color: rgb(255, 128, 0);
+}
diff --git a/test/e2e/app-dir/css-order/app/second/page.tsx b/test/e2e/app-dir/css-order/app/second/page.tsx
@@ -0,0 +1,32 @@
+import Link from 'next/link'
+import baseStyle from '../base2.module.css'
+import baseStyle2 from '../base2-scss.module.scss'
+import style from './style.module.scss'
+
+export default function Page() {
+  return (
+    <div>
+      <p
+        className={`${style.name} ${baseStyle.base} ${baseStyle2.base}`}
+        id="hello2"
+      >
+        hello world
+      </p>
+      <Link href={'/first'} id="first">
+        First
+      </Link>
+      <Link href={'/first-client'} id="first-client">
+        First client
+      </Link>
+      <Link href={'/second'} id="second">
+        Second
+      </Link>
+      <Link href={'/second-client'} id="second-client">
+        Second client
+      </Link>
+      <Link href={'/third'} id="third">
+        Third
+      </Link>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/css-order/app/second/style.module.scss b/test/e2e/app-dir/css-order/app/second/style.module.scss
@@ -0,0 +1,4 @@
+.name {
+  composes: base from '../base-scss.module.scss';
+  color: green;
+}
diff --git a/test/e2e/app-dir/css-order/app/third/page.tsx b/test/e2e/app-dir/css-order/app/third/page.tsx
@@ -0,0 +1,32 @@
+import Link from 'next/link'
+import baseStyle from '../base2.module.css'
+import baseStyle2 from '../base2-scss.module.scss'
+import style from './style.module.scss'
+
+export default function Page() {
+  return (
+    <div>
+      <p
+        className={`${style.name} ${baseStyle.base} ${baseStyle2.base}`}
+        id="hello3"
+      >
+        hello world
+      </p>
+      <Link href={'/first'} id="first">
+        First
+      </Link>
+      <Link href={'/first-client'} id="first-client">
+        First client
+      </Link>
+      <Link href={'/second'} id="second">
+        Second
+      </Link>
+      <Link href={'/second-client'} id="second-client">
+        Second client
+      </Link>
+      <Link href={'/third'} id="third">
+        Third
+      </Link>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/css-order/app/third/style.module.scss b/test/e2e/app-dir/css-order/app/third/style.module.scss
@@ -0,0 +1,4 @@
+.name {
+  composes: base from '../base-scss.module.scss';
+  color: rgb(0, 128, 128);
+}
diff --git a/test/e2e/app-dir/css-order/css-order.test.ts b/test/e2e/app-dir/css-order/css-order.test.ts
@@ -0,0 +1,83 @@
+import { createNextDescribe } from 'e2e-utils'
+
+function permute(all) {
+  const result = []
+
+  for (const first of all) {
+    result.push([first])
+    for (const second of all) {
+      if (first === second) {
+        continue
+      }
+      result.push([first, second])
+    }
+  }
+
+  return result
+}
+
+const PAGES = {
+  first: {
+    url: '/first',
+    selector: '#hello1',
+    color: 'rgb(0, 0, 255)',
+  },
+  second: {
+    url: '/second',
+    selector: '#hello2',
+    color: 'rgb(0, 128, 0)',
+  },
+  third: {
+    url: '/third',
+    selector: '#hello3',
+    color: 'rgb(0, 128, 128)',
+  },
+  'first-client': {
+    url: '/first-client',
+    selector: '#hello1c',
+    color: 'rgb(255, 0, 255)',
+  },
+  'second-client': {
+    url: '/second-client',
+    selector: '#hello2c',
+    color: 'rgb(255, 128, 0)',
+  },
+}
+
+const allOrders = permute(Object.keys(PAGES))
+
+createNextDescribe(
+  'css-order',
+  {
+    files: __dirname,
+  },
+  ({ next }) => {
+    for (const ordering of allOrders) {
+      it(`should load correct styles when opening pages in this order: ${ordering.join(
+        ' -> '
+      )}`, async () => {
+        const start = PAGES[ordering[0]]
+        const browser = await next.browser(start.url)
+        const check = async (pageInfo) => {
+          expect(
+            await browser
+              .waitForElementByCss(pageInfo.selector)
+              .getComputedCss('color')
+          ).toBe(pageInfo.color)
+        }
+        const navigate = async (page) => {
+          await browser.waitForElementByCss('#' + page).click()
+        }
+        await check(start)
+        for (const page of ordering.slice(1)) {
+          await navigate(page)
+          await check(PAGES[page])
+        }
+        for (const page of ordering) {
+          await navigate(page)
+          await check(PAGES[page])
+        }
+      })
+    }
+  }
+)
diff --git a/test/e2e/app-dir/css-order/next.config.js b/test/e2e/app-dir/css-order/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig