Add test that there are no server-side CSS chunks

mischnic · mischnic · commit 7ed3bd2db2b2 · 2025-08-09T09:48:59.000+02:00
diff --git a/test/e2e/app-dir/css-server-chunks/app/client/page.tsx b/test/e2e/app-dir/css-server-chunks/app/client/page.tsx
@@ -0,0 +1,8 @@
+'use client'
+
+import '../../global.css'
+import styles from '../../styles.module.css'
+
+export default function Page() {
+  return <div className={styles.foo}>Hello</div>
+}
diff --git a/test/e2e/app-dir/css-server-chunks/app/layout.tsx b/test/e2e/app-dir/css-server-chunks/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-server-chunks/app/server/page.tsx b/test/e2e/app-dir/css-server-chunks/app/server/page.tsx
@@ -0,0 +1,6 @@
+import '../../global.css'
+import styles from '../../styles.module.css'
+
+export default function Page() {
+  return <div className={styles.foo}>Hello</div>
+}
diff --git a/test/e2e/app-dir/css-server-chunks/css-server-chunks.test.ts b/test/e2e/app-dir/css-server-chunks/css-server-chunks.test.ts
@@ -0,0 +1,47 @@
+import { nextTestSetup } from 'e2e-utils'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+
+describe('css-server-chunks', () => {
+  const { next, skipped } = nextTestSetup({
+    files: __dirname,
+    skipDeployment: true,
+  })
+
+  if (skipped) {
+    return
+  }
+
+  it('should not write CSS chunks for the server', async () => {
+    // Fetch all routes to compile them in development
+    expect((await next.fetch('/client')).status).toBe(200)
+    expect((await next.fetch('/server')).status).toBe(200)
+    expect((await next.fetch('/pages')).status).toBe(200)
+
+    let clientChunks = (
+      await fs.readdir(path.join(next.testDir, '.next', 'static'), {
+        recursive: true,
+      })
+    ).filter((f) => f.endsWith('.js') || f.endsWith('.css'))
+    expect(clientChunks).toEqual(
+      expect.arrayContaining([expect.stringMatching(/\.css$/)])
+    )
+
+    let serverChunks = (
+      await Promise.all(
+        ['.next/server/app', '.next/server/pages'].map((d) =>
+          fs.readdir(path.join(next.testDir, d), {
+            recursive: true,
+            encoding: 'utf8',
+          })
+        )
+      )
+    )
+      .flat()
+      .filter((f) => f.endsWith('.js') || f.endsWith('.css'))
+    expect(serverChunks).not.toBeEmpty()
+    expect(serverChunks).not.toEqual(
+      expect.arrayContaining([expect.stringMatching(/\.css$/)])
+    )
+  })
+})
diff --git a/test/e2e/app-dir/css-server-chunks/global.css b/test/e2e/app-dir/css-server-chunks/global.css
@@ -0,0 +1,3 @@
+body {
+  color: blue;
+}
diff --git a/test/e2e/app-dir/css-server-chunks/next.config.js b/test/e2e/app-dir/css-server-chunks/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig
diff --git a/test/e2e/app-dir/css-server-chunks/pages/_app.js b/test/e2e/app-dir/css-server-chunks/pages/_app.js
@@ -0,0 +1,5 @@
+import '../global.css'
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
diff --git a/test/e2e/app-dir/css-server-chunks/pages/pages.js b/test/e2e/app-dir/css-server-chunks/pages/pages.js
@@ -0,0 +1,5 @@
+import styles from '../styles.module.css'
+
+export default function Page() {
+  return <div className={styles.foo}>Hello</div>
+}
diff --git a/test/e2e/app-dir/css-server-chunks/styles.module.css b/test/e2e/app-dir/css-server-chunks/styles.module.css
@@ -0,0 +1,3 @@
+.foo {
+  color: red;
+}
