fix(plugin-legacy): respect entryFileNames for polyfill chunks (#8247)

Author: sapphi-red

packages/plugin-legacy/src/index.ts

@@ -131,11 +131,12 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
             modernPolyfills
           )
         await buildPolyfillChunk(
-          'polyfills-modern',
           modernPolyfills,
           bundle,
           facadeToModernPolyfillMap,
           config.build,
+          'es',
+          opts,
           options.externalSystemJS
         )
         return
@@ -160,13 +161,14 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
           )
 
         await buildPolyfillChunk(
-          'polyfills-legacy',
           legacyPolyfills,
           bundle,
           facadeToLegacyPolyfillMap,
           // force using terser for legacy polyfill minification, since esbuild
           // isn't legacy-safe
           config.build,
+          'iife',
+          opts,
           options.externalSystemJS
         )
       }
@@ -549,11 +551,12 @@ export async function detectPolyfills(
 }
 
 async function buildPolyfillChunk(
-  name: string,
   imports: Set<string>,
   bundle: OutputBundle,
   facadeToChunkMap: Map<string, string>,
   buildOptions: BuildOptions,
+  format: 'iife' | 'es',
+  rollupOutputOptions: NormalizedOutputOptions,
   externalSystemJS?: boolean
 ) {
   let { minify, assetsDir } = buildOptions
@@ -571,10 +574,11 @@ async function buildPolyfillChunk(
       assetsDir,
       rollupOptions: {
         input: {
-          [name]: polyfillId
+          polyfills: polyfillId
         },
         output: {
-          format: name.includes('legacy') ? 'iife' : 'es',
+          format,
+          entryFileNames: rollupOutputOptions.entryFileNames,
           manualChunks: undefined
         }
       }

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

@@ -37,7 +37,8 @@ export function manifestPlugin(config: ResolvedConfig): Plugin {
           )
           if (format === 'system' && !chunk.name.includes('-legacy')) {
             const ext = path.extname(name)
-            name = name.slice(0, -ext.length) + `-legacy` + ext
+            const endPos = ext.length !== 0 ? -ext.length : undefined
+            name = name.slice(0, endPos) + `-legacy` + ext
           }
           return name.replace(/\0/g, '')
         } else {

playground/legacy/__tests__/legacy.spec.ts

@@ -71,6 +71,12 @@ test('should load dynamic import with css', async () => {
 describe.runIf(isBuild)('build', () => {
   test('should generate correct manifest', async () => {
     const manifest = readManifest()
+    // legacy polyfill
+    expect(manifest['../../vite/legacy-polyfills-legacy']).toBeDefined()
+    expect(manifest['../../vite/legacy-polyfills-legacy'].src).toBe(
+      '../../vite/legacy-polyfills-legacy'
+    )
+    // modern polyfill
     expect(manifest['../../vite/legacy-polyfills']).toBeDefined()
     expect(manifest['../../vite/legacy-polyfills'].src).toBe(
       '../../vite/legacy-polyfills'

playground/legacy/vite.config-custom-filename.js

@@ -1,7 +1,7 @@
 const legacy = require('@vitejs/plugin-legacy').default
 
 module.exports = {
-  plugins: [legacy()],
+  plugins: [legacy({ modernPolyfills: true })],
   build: {
     manifest: true,
     minify: false,

playground/legacy/vite.config.js

@@ -6,7 +6,8 @@ module.exports = {
   base: './',
   plugins: [
     legacy({
-      targets: 'IE 11'
+      targets: 'IE 11',
+      modernPolyfills: true
     })
   ],