Fix CSS deploy id case (#51325)

x-ref: [slack
thread](https://vercel.slack.com/archives/C04MEB9L9RQ/p1686787663510239?thread_ts=1686770561.895939&cid=C04MEB9L9RQ)

.github/workflows/build_and_deploy.yml

@@ -418,9 +418,6 @@ jobs:
       NEXT_TELEMETRY_DISABLED: 1
       VERCEL_TEST_TOKEN: ${{ secrets.VERCEL_TEST_TOKEN }}
       VERCEL_TEST_TEAM: vtest314-next-e2e-tests
-      # run all tests so we can see all failures even if
-      # some flake or aren't patched yet
-      NEXT_TEST_CONTINUE_ON_ERROR: 1
     steps:
       - uses: actions/cache@v3
         timeout-minutes: 5
@@ -439,7 +436,7 @@ jobs:
       - run: RESET_VC_PROJECT=true node scripts/reset-vercel-project.mjs
         name: Reset test project
 
-      - run: docker run --rm -v $(pwd):/work mcr.microsoft.com/playwright:v1.28.1-jammy /bin/bash -c "cd /work && NODE_VERSION=${{ env.NODE_LTS_VERSION }} ./scripts/setup-node.sh && npm i -g pnpm@${PNPM_VERSION} > /dev/null && VERCEL_TEST_TOKEN=${{ secrets.VERCEL_TEST_TOKEN }} VERCEL_TEST_TEAM=vtest314-next-e2e-tests NEXT_TEST_JOB=1 NEXT_TEST_MODE=deploy TEST_TIMINGS_TOKEN=${{ secrets.TEST_TIMINGS_TOKEN }} xvfb-run node run-tests.js --type e2e >> /proc/1/fd/1"
+      - run: docker run --rm -v $(pwd):/work mcr.microsoft.com/playwright:v1.28.1-jammy /bin/bash -c "cd /work && NODE_VERSION=${{ env.NODE_LTS_VERSION }} ./scripts/setup-node.sh && npm i -g pnpm@${PNPM_VERSION} > /dev/null && VERCEL_TEST_TOKEN=${{ secrets.VERCEL_TEST_TOKEN }} VERCEL_TEST_TEAM=vtest314-next-e2e-tests NEXT_TEST_JOB=1 NEXT_TEST_MODE=deploy TEST_TIMINGS_TOKEN=${{ secrets.TEST_TIMINGS_TOKEN }} NEXT_TEST_CONTINUE_ON_ERROR=1 xvfb-run node run-tests.js --type e2e >> /proc/1/fd/1"
         name: Run test/e2e (deploy)
 
       - name: Upload test trace

packages/next/src/client/app-index.tsx

@@ -39,21 +39,36 @@ declare global {
   const __webpack_require__: any
 }
 
+const addChunkSuffix =
+  (getOriginalChunk: (chunkId: any) => string) => (chunkId: any) => {
+    return (
+      getOriginalChunk(chunkId) +
+      `${
+        process.env.__NEXT_DEPLOYMENT_ID
+          ? `?dpl=${process.env.__NEXT_DEPLOYMENT_ID}`
+          : ''
+      }`
+    )
+  }
+
 // eslint-disable-next-line no-undef
 const getChunkScriptFilename = __webpack_require__.u
 const chunkFilenameMap: any = {}
 
 // eslint-disable-next-line no-undef
-__webpack_require__.u = (chunkId: any) => {
-  return (
-    encodeURI(chunkFilenameMap[chunkId] || getChunkScriptFilename(chunkId)) +
-    `${
-      process.env.__NEXT_DEPLOYMENT_ID
-        ? `?dpl=${process.env.__NEXT_DEPLOYMENT_ID}`
-        : ''
-    }`
-  )
-}
+__webpack_require__.u = addChunkSuffix((chunkId) =>
+  encodeURI(chunkFilenameMap[chunkId] || getChunkScriptFilename(chunkId))
+)
+
+// eslint-disable-next-line no-undef
+const getChunkCssFilename = __webpack_require__.k
+// eslint-disable-next-line no-undef
+__webpack_require__.k = addChunkSuffix(getChunkCssFilename)
+
+// eslint-disable-next-line no-undef
+const getMiniCssFilename = __webpack_require__.miniCssF
+// eslint-disable-next-line no-undef
+__webpack_require__.miniCssF = addChunkSuffix(getMiniCssFilename)
 
 // Ignore the module ID transform in client.
 // eslint-disable-next-line no-undef

packages/next/src/client/index.tsx

@@ -63,20 +63,32 @@ declare global {
   }
 }
 
+const addChunkSuffix =
+  (getOriginalChunk: (chunkId: any) => string) => (chunkId: any) => {
+    return (
+      getOriginalChunk(chunkId) +
+      `${
+        process.env.__NEXT_DEPLOYMENT_ID
+          ? `?dpl=${process.env.__NEXT_DEPLOYMENT_ID}`
+          : ''
+      }`
+    )
+  }
+
 // ensure dynamic imports have deployment id added if enabled
 const getChunkScriptFilename = __webpack_require__.u
+// eslint-disable-next-line no-undef
+__webpack_require__.u = addChunkSuffix(getChunkScriptFilename)
 
 // eslint-disable-next-line no-undef
-__webpack_require__.u = (chunkId: any) => {
-  return (
-    getChunkScriptFilename(chunkId) +
-    `${
-      process.env.__NEXT_DEPLOYMENT_ID
-        ? `?dpl=${process.env.__NEXT_DEPLOYMENT_ID}`
-        : ''
-    }`
-  )
-}
+const getChunkCssFilename = __webpack_require__.k
+// eslint-disable-next-line no-undef
+__webpack_require__.k = addChunkSuffix(getChunkCssFilename)
+
+// eslint-disable-next-line no-undef
+const getMiniCssFilename = __webpack_require__.miniCssF
+// eslint-disable-next-line no-undef
+__webpack_require__.miniCssF = addChunkSuffix(getMiniCssFilename)
 
 type RenderRouteInfo = PrivateRouteInfo & {
   App: AppComponent

test/production/deployment-id-handling/app/data.js

@@ -1,3 +1,6 @@
+import styles from './data.module.css'
+
 export const data = {
   now: Date.now(),
+  styles,
 }

test/production/deployment-id-handling/app/data.module.css

@@ -0,0 +1,3 @@
+.wrap {
+  display: flex;
+}

test/production/deployment-id-handling/app/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    useDeploymentId: true,
+  },
+}

test/production/deployment-id-handling/app/pages/index.tsx

@@ -1,10 +1,11 @@
 import testImage from '../public/test.jpg'
 import Image from 'next/image'
+import styles from './styles.module.css'
 
 export default function Page() {
   return (
     <>
-      <p>hello pages</p>
+      <p className={styles.template}>hello pages</p>
       <Image src={testImage} alt="test image" />
 
       <button

test/production/deployment-id-handling/app/pages/styles.module.css

@@ -0,0 +1,3 @@
+.template {
+  color: orange;
+}

test/production/deployment-id-handling/app/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
+  },
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

test/production/deployment-id-handling/deployment-id-handling.test.ts

@@ -11,11 +11,6 @@ createNextDescribe(
     env: {
       NEXT_DEPLOYMENT_ID: deploymentId,
     },
-    nextConfig: {
-      experimental: {
-        useDeploymentId: true,
-      },
-    },
   },
   ({ next }) => {
     it.each([