feat: lib mode respect rollup output config

packages/vite/src/node/config.ts

@@ -7,7 +7,7 @@ import colors from 'picocolors'
 import type { Alias, AliasOptions } from 'types/alias'
 import aliasPlugin from '@rollup/plugin-alias'
 import { build } from 'esbuild'
-import type { RollupOptions } from 'rollup'
+import type { OutputOptions, RollupOptions } from 'rollup'
 import type { Plugin } from './plugin'
 import type { BuildOptions, ResolvedBuildOptions } from './build'
 import { resolveBuildOptions } from './build'
@@ -570,31 +570,54 @@ export async function resolveConfig(
   }
 
   // Check if all assetFileNames have the same reference.
-  // If not, display a warn for user.
+  // If not, display a warn for user. (exclude lib mode, it will make all asset to base64)
   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 (
+    !config.build?.lib &&
+    !verifyRollupOutputOption(outputOption, 'assetFileNames')
+  ) {
+    resolved.logger.warn(
+      colors.yellow(
+        `assetFileNames isn't equal for every build.rollupOptions.output. ` +
+          `A single pattern across all outputs is supported by Vite.`
       )
-      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.
-`)
-        )
-      }
-    }
+    )
   }
 
+  const workerOutputOption = config.worker?.rollupOptions?.output ?? []
+  const differentOpts = [
+    !verifyRollupOutputOption(workerOutputOption, 'assetFileNames') &&
+      'assetFileNames',
+    !verifyRollupOutputOption(workerOutputOption, 'chunkFileNames') &&
+      'chunkFileNames',
+    !verifyRollupOutputOption(workerOutputOption, 'entryFileNames') &&
+      'entryFileNames'
+  ].filter(Boolean)
+  if (differentOpts.length > 0) {
+    resolved.logger.warn(
+      colors.yellow(
+        `${differentOpts.join(
+          ','
+        )} isn't equal for every worker.rollupOptions.output. ` +
+          `A single pattern across all outputs is supported by Vite.`
+      )
+    )
+  }
   return resolved
 }
 
+function verifyRollupOutputOption(
+  options: OutputOptions | OutputOptions[],
+  field: 'assetFileNames' | 'chunkFileNames' | 'entryFileNames'
+): boolean {
+  if (Array.isArray(options)) {
+    const names = options.map((option) => option[field])
+    return names.length > 1 && names.some((name) => name !== names[0])
+  }
+  return false
+}
+
 /**
  * Resolve base. Note that some users use Vite to build for non-web targets like
  * electron or expects to deploy

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

@@ -597,8 +597,13 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
       let extractedCss = outputToExtractedCSSMap.get(opts)
       if (extractedCss && !hasEmitted) {
-        hasEmitted = true
         extractedCss = await finalizeCss(extractedCss, true, config)
+
+        // lib mode should emit css each rollup.generate
+        if (!config.build.lib) {
+          hasEmitted = true
+        }
+
         this.emitFile({
           name: cssBundleName,
           type: 'asset',

playground/lib/src/main.js

@@ -1,9 +1,19 @@
+import './dynamic.css'
+import png from './asset.png?url'
 export default function myLib(sel) {
+  const worker = new Worker(new URL('./worker.js', import.meta.url))
+  worker.addEventListener('message', (e) => {
+    console.log(e.data)
+  })
   // Force esbuild spread helpers (https://github.com/evanw/esbuild/issues/951)
   console.log({ ...'foo' })
 
   document.querySelector(sel).textContent = 'It works'
 
+  const img = document.createElement('img')
+  img.src = png
+  document.body.appendChild(img)
+
   // Env vars should not be replaced
   console.log(process.env.NODE_ENV)
 }

playground/lib/src/worker.js

@@ -0,0 +1 @@
+self.postMessage('hello')

playground/lib/vite.config.js

@@ -7,14 +7,30 @@ const path = require('path')
 module.exports = {
   build: {
     rollupOptions: {
-      output: {
-        banner: `/*!\nMayLib\n*/`
-      }
+      output: [
+        {
+          format: 'es',
+          banner: `/*!\nMayLib\n*/`,
+          assetFileNames: `subdir/assets.[name].[ext]`,
+          chunkFileNames: `subdir/chunk.[name].js`
+        },
+        {
+          format: 'umd',
+          banner: `/*!\nMayLib\n*/`,
+          assetFileNames: `subdir2/assets.[name].[ext]`,
+          chunkFileNames: `subdir2/chunk.[name].js`
+        },
+        {
+          format: 'iife',
+          banner: `/*!\nMayLib\n*/`,
+          assetFileNames: `subdir3/assets.[name].[ext]`,
+          chunkFileNames: `subdir3/chunk.[name].js`
+        }
+      ]
     },
     lib: {
       entry: path.resolve(__dirname, 'src/main.js'),
       name: 'MyLib',
-      formats: ['es', 'umd', 'iife'],
       fileName: 'my-lib-custom-filename'
     }
   },

playground/vue-lib/src-consumer/index.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 // @ts-ignore
-import { CompA } from '../dist/lib/my-vue-lib'
-import '../dist/lib/style.css'
+import { CompA } from '../dist/lib/my-vue-lib.mjs'
+import '../dist/lib/assets1.style.css'
 
 const app = createApp(CompA)
 app.mount('#app')

playground/vue-lib/vite.config.lib.ts

@@ -14,9 +14,20 @@ export default defineConfig({
     },
     rollupOptions: {
       external: ['vue'],
-      output: {
-        globals: { vue: 'Vue' }
-      }
+      output: [
+        {
+          globals: { vue: 'Vue' },
+          format: 'es',
+          assetFileNames: `assets1.[name].[ext]`,
+          chunkFileNames: `chunk1.[name].js`
+        },
+        {
+          globals: { vue: 'Vue' },
+          format: 'es',
+          assetFileNames: `assets2.[name].[ext]`,
+          chunkFileNames: `chunk2.[name].js`
+        }
+      ]
     }
   },
   plugins: [vue()]