fix(asset): respect assetFileNames if rollupOptions.output is an array (#8561)

Co-authored-by: patak-dev <matias.capeletto@gmail.com>

packages/vite/src/node/config.ts

@@ -569,6 +569,29 @@ export async function resolveConfig(
     )
   }
 
+  // Check if all assetFileNames have the same reference.
+  // If not, display a warn for user.
+  const outputOption = config.build?.rollupOptions?.output ?? []
+  // Use isArray to narrow its type to array
+  if (Array.isArray(outputOption)) {
+    const assetFileNamesList = outputOption.map(
+      (output) => output.assetFileNames
+    )
+    if (assetFileNamesList.length > 1) {
+      const firstAssetFileNames = assetFileNamesList[0]
+      const hasDifferentReference = assetFileNamesList.some(
+        (assetFileNames) => assetFileNames !== firstAssetFileNames
+      )
+      if (hasDifferentReference) {
+        resolved.logger.warn(
+          colors.yellow(`
+assetFileNames isn't equal for every build.rollupOptions.output. A single pattern across all outputs is supported by Vite.
+`)
+        )
+      }
+    }
+  }
+
   return resolved
 }
 

packages/vite/src/node/plugins/asset.ts

@@ -365,11 +365,22 @@ async function fileToBuiltUrl(
     const { search, hash } = parseUrl(id)
     const postfix = (search || '') + (hash || '')
     const output = config.build?.rollupOptions?.output
-    const assetFileNames =
+
+    const defaultAssetFileNames = path.posix.join(
+      config.build.assetsDir,
+      '[name].[hash][extname]'
+    )
+    // Steps to determine which assetFileNames will be actually used.
+    // First, if output is an object or string, use assetFileNames in it.
+    // And a default assetFileNames as fallback.
+    let assetFileNames: Exclude<OutputOptions['assetFileNames'], undefined> =
       (output && !Array.isArray(output) ? output.assetFileNames : undefined) ??
-      // defaults to '<assetsDir>/[name].[hash][extname]'
-      // slightly different from rollup's one ('assets/[name]-[hash][extname]')
-      path.posix.join(config.build.assetsDir, '[name].[hash][extname]')
+      defaultAssetFileNames
+    if (output && Array.isArray(output)) {
+      // Second, if output is an array, adopt assetFileNames in the first object.
+      assetFileNames = output[0].assetFileNames ?? assetFileNames
+    }
+
     const fileName = assetFileNamesToFileName(
       assetFileNames,
       file,

playground/legacy/main.js

@@ -1,4 +1,5 @@
 import './style.css'
+import './vite.svg'
 
 async function run() {
   const { fn } = await import('./async.js')

playground/legacy/package.json

@@ -7,6 +7,7 @@
     "build": "vite build --debug legacy",
     "build:custom-filename": "vite --config ./vite.config-custom-filename.js build  --debug legacy",
     "build:dynamic-css": "vite --config ./vite.config-dynamic-css.js build  --debug legacy",
+    "build:multiple-output": "vite --config ./vite.config-multiple-output.js build",
     "debug": "node --inspect-brk ../../packages/vite/bin/vite",
     "preview": "vite preview"
   },

playground/legacy/vite.config-multiple-output.js

@@ -0,0 +1,28 @@
+import legacy from '@vitejs/plugin-legacy'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [legacy({ modernPolyfills: true })],
+  build: {
+    manifest: true,
+    minify: false,
+    rollupOptions: {
+      output: [
+        {
+          assetFileNames() {
+            return 'assets/subdir/[name].[hash][extname]'
+          },
+          entryFileNames: `assets/subdir/[name].js`,
+          chunkFileNames: `assets/subdir/[name].js`
+        },
+        {
+          assetFileNames() {
+            return 'assets/subdir/[name].[hash][extname]'
+          },
+          entryFileNames: `assets/anotherSubdir/[name].js`,
+          chunkFileNames: `assets/anotherSubdir/[name].js`
+        }
+      ]
+    }
+  }
+})

playground/legacy/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>