Fix CSS deploy id case (#51325)

x-ref: [slack thread](https://vercel.slack.com/archives/C04MEB9L9RQ/p1686787663510239?thread_ts=1686770561.895939&cid=C04MEB9L9RQ)
2023-06-14 20:28:18 -07:00 · 2023-06-14 20:28:18 -07:00 · bdcca0ccff
commit bdcca0ccff
parent 1660fdfcbb
10 changed files with 89 additions and 30 deletions
--- a/.github/workflows/build_and_deploy.yml
+++ b/.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
--- a/packages/next/src/client/app-index.tsx
+++ b/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
--- a/packages/next/src/client/index.tsx
+++ b/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
--- a/test/production/deployment-id-handling/app/data.js
+++ b/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,
 }
--- a/test/production/deployment-id-handling/app/data.module.css
+++ b/test/production/deployment-id-handling/app/data.module.css
@ -0,0 +1,3 @@
+.wrap {
+  display: flex;
+}
--- a/test/production/deployment-id-handling/app/next.config.js
+++ b/test/production/deployment-id-handling/app/next.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    useDeploymentId: true,
+  },
+}
--- a/test/production/deployment-id-handling/app/pages/index.tsx
+++ b/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
--- a/test/production/deployment-id-handling/app/pages/styles.module.css
+++ b/test/production/deployment-id-handling/app/pages/styles.module.css
@ -0,0 +1,3 @@
+.template {
+  color: orange;
+}
--- a/test/production/deployment-id-handling/app/tsconfig.json
+++ b/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"]
+}
--- a/test/production/deployment-id-handling/deployment-id-handling.test.ts
+++ b/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([