feat(dev): added assets to manifest

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

@@ -47,6 +47,7 @@ import {
 import type { Logger } from '../logger'
 import { addToHTMLProxyTransformResult } from './html'
 import {
+  assetFileNamesToFileName,
   assetUrlRE,
   checkPublicFile,
   fileToUrl,
@@ -488,6 +489,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         return chunkCSS
       }
 
+      function ensureFileExt(name: string, ext: string) {
+        return path.format({ ...path.parse(name), base: undefined, ext })
+      }
+
       if (config.build.cssCodeSplit) {
         if (isPureCssChunk) {
           // this is a shared CSS-only chunk that is empty.
@@ -498,14 +503,34 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           opts.format === 'cjs' ||
           opts.format === 'system'
         ) {
-          const cssAssetName = chunk.name + '.css'
+          const cssAssetName = ensureFileExt(
+            chunk.facadeModuleId
+              ? normalizePath(path.relative(config.root, chunk.facadeModuleId))
+              : chunk.name,
+            '.css'
+          )
 
           chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName)
           chunkCSS = await finalizeCss(chunkCSS, true, config)
 
+          const output = config.build?.rollupOptions?.output
+          const assetFileNames =
+            (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]')
+
           // emit corresponding css file
           const fileHandle = this.emitFile({
             name: cssAssetName,
+            fileName: assetFileNamesToFileName(
+              assetFileNames,
+              cssAssetName,
+              getHash(chunkCSS),
+              chunkCSS
+            ),
             type: 'asset',
             source: chunkCSS
           })

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

@@ -1,5 +1,5 @@
 import path from 'path'
-import type { OutputChunk } from 'rollup'
+import type { OutputAsset, OutputChunk } from 'rollup'
 import type { ResolvedConfig } from '..'
 import type { Plugin } from '../plugin'
 import { normalizePath } from '../utils'
@@ -99,10 +99,19 @@ export function manifestPlugin(config: ResolvedConfig): Plugin {
         return manifestChunk
       }
 
+      function createAsset(chunk: OutputAsset): ManifestChunk {
+        return {
+          file: chunk.fileName,
+          src: chunk.name
+        }
+      }
+
       for (const file in bundle) {
         const chunk = bundle[file]
         if (chunk.type === 'chunk') {
           manifest[getChunkName(chunk)] = createChunk(chunk)
+        } else if (chunk.type === 'asset' && typeof chunk.name === 'string') {
+          manifest[chunk.name] = createAsset(chunk)
         }
       }
 

playground/backend-integration/__tests__/backend-integration.spec.ts

@@ -32,8 +32,12 @@ describe.runIf(isBuild)('build', () => {
   test('manifest', async () => {
     const manifest = readManifest('dev')
     const htmlEntry = manifest['index.html']
+    const cssAssetEntry = manifest['global.css']
+    const imgAssetEntry = manifest['../images/logo.png']
     expect(htmlEntry.css.length).toEqual(1)
     expect(htmlEntry.assets.length).toEqual(1)
+    expect(cssAssetEntry?.file).not.toBeUndefined()
+    expect(imgAssetEntry?.file).not.toBeUndefined()
   })
 })