From 796c2be4736826f3e9cc8a3649e437f3cc185aef Mon Sep 17 00:00:00 2001
From: Niklas Mischkulnig <4586894+mischnic@users.noreply.github.com>
Date: Fri, 8 Aug 2025 15:10:26 +0200
Subject: [PATCH] Add test that there are no server-side CSS chunks
---
.../css-server-chunks/app/client/page.tsx | 8 ++++
.../app-dir/css-server-chunks/app/layout.tsx | 7 +++
.../css-server-chunks/app/server/page.tsx | 6 +++
.../css-server-chunks.test.ts | 47 +++++++++++++++++++
test/e2e/app-dir/css-server-chunks/global.css | 3 ++
.../app-dir/css-server-chunks/next.config.js | 6 +++
.../app-dir/css-server-chunks/pages/_app.js | 5 ++
.../app-dir/css-server-chunks/pages/pages.js | 5 ++
.../css-server-chunks/styles.module.css | 3 ++
9 files changed, 90 insertions(+)
create mode 100644 test/e2e/app-dir/css-server-chunks/app/client/page.tsx
create mode 100644 test/e2e/app-dir/css-server-chunks/app/layout.tsx
create mode 100644 test/e2e/app-dir/css-server-chunks/app/server/page.tsx
create mode 100644 test/e2e/app-dir/css-server-chunks/css-server-chunks.test.ts
create mode 100644 test/e2e/app-dir/css-server-chunks/global.css
create mode 100644 test/e2e/app-dir/css-server-chunks/next.config.js
create mode 100644 test/e2e/app-dir/css-server-chunks/pages/_app.js
create mode 100644 test/e2e/app-dir/css-server-chunks/pages/pages.js
create mode 100644 test/e2e/app-dir/css-server-chunks/styles.module.css
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
new file mode 100644
index 0000000000000..70415837bf1a2
--- /dev/null
+++ 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 Hello
+}
diff --git a/test/e2e/app-dir/css-server-chunks/app/layout.tsx b/test/e2e/app-dir/css-server-chunks/app/layout.tsx
new file mode 100644
index 0000000000000..e7077399c03ce
--- /dev/null
+++ b/test/e2e/app-dir/css-server-chunks/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ )
+}
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
new file mode 100644
index 0000000000000..b30723fe36fcc
--- /dev/null
+++ 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 Hello
+}
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
new file mode 100644
index 0000000000000..7b955c0aa0320
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..7cfe2bf44904e
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..807126e4cf0bf
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..b1d349b938ecf
--- /dev/null
+++ 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
+}
diff --git a/test/e2e/app-dir/css-server-chunks/pages/pages.js b/test/e2e/app-dir/css-server-chunks/pages/pages.js
new file mode 100644
index 0000000000000..32d80f013b9e7
--- /dev/null
+++ 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 Hello
+}
diff --git a/test/e2e/app-dir/css-server-chunks/styles.module.css b/test/e2e/app-dir/css-server-chunks/styles.module.css
new file mode 100644
index 0000000000000..a15c877ac01f4
--- /dev/null
+++ b/test/e2e/app-dir/css-server-chunks/styles.module.css
@@ -0,0 +1,3 @@
+.foo {
+ color: red;
+}