fix: preserve extension of css assets in the manifest (#8768)

Author: ElMassimo

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

@@ -143,6 +143,8 @@ export const removedPureCssFilesCache = new WeakMap<
   Map<string, RenderedChunk>
 >()
 
+export const cssEntryFilesCache = new WeakMap<ResolvedConfig, Set<string>>()
+
 const postcssConfigCache = new WeakMap<
   ResolvedConfig,
   PostCSSConfigResult | null
@@ -179,6 +181,7 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
       cssModulesCache.set(config, moduleCache)
 
       removedPureCssFilesCache.set(config, new Map<string, RenderedChunk>())
+      cssEntryFilesCache.set(config, new Set())
     },
 
     async transform(raw, id, options) {
@@ -453,6 +456,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         return null
       }
 
+      const cssEntryFiles = cssEntryFilesCache.get(config)!
       const publicAssetUrlMap = publicAssetUrlCache.get(config)!
 
       // resolve asset URL placeholders to their built file URLs
@@ -509,22 +513,24 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           pureCssChunks.add(chunk.fileName)
         }
         if (opts.format === 'es' || opts.format === 'cjs') {
-          const cssAssetName = ensureFileExt(
-            chunk.facadeModuleId
-              ? normalizePath(path.relative(config.root, chunk.facadeModuleId))
-              : chunk.name,
-            '.css'
-          )
+          const cssAssetName = chunk.facadeModuleId
+            ? normalizePath(path.relative(config.root, chunk.facadeModuleId))
+            : chunk.name
+
+          const lang = path.extname(cssAssetName).slice(1)
+          const cssFileName = ensureFileExt(cssAssetName, '.css')
+
+          if (chunk.isEntry && isPureCssChunk) cssEntryFiles.add(cssAssetName)
 
           chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName)
           chunkCSS = await finalizeCss(chunkCSS, true, config)
 
           // emit corresponding css file
           const fileHandle = this.emitFile({
-            name: cssAssetName,
+            name: isPreProcessor(lang) ? cssAssetName : cssFileName,
             fileName: assetFileNamesToFileName(
               resolveAssetFileNames(config),
-              cssAssetName,
+              cssFileName,
               getHash(chunkCSS),
               chunkCSS
             ),

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

@@ -3,6 +3,7 @@ import type { OutputAsset, OutputChunk } from 'rollup'
 import type { ResolvedConfig } from '..'
 import type { Plugin } from '../plugin'
 import { normalizePath } from '../utils'
+import { cssEntryFilesCache } from './css'
 
 export type Manifest = Record<string, ManifestChunk>
 
@@ -100,12 +101,18 @@ export function manifestPlugin(config: ResolvedConfig): Plugin {
       }
 
       function createAsset(chunk: OutputAsset): ManifestChunk {
-        return {
+        const manifestChunk: ManifestChunk = {
           file: chunk.fileName,
           src: chunk.name
         }
+
+        if (cssEntryFiles.has(chunk.name!)) manifestChunk.isEntry = true
+
+        return manifestChunk
       }
 
+      const cssEntryFiles = cssEntryFilesCache.get(config)!
+
       for (const file in bundle) {
         const chunk = bundle[file]
         if (chunk.type === 'chunk') {

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

@@ -33,11 +33,17 @@ describe.runIf(isBuild)('build', () => {
     const manifest = readManifest('dev')
     const htmlEntry = manifest['index.html']
     const cssAssetEntry = manifest['global.css']
+    const scssAssetEntry = manifest['nested/blue.scss']
     const imgAssetEntry = manifest['../images/logo.png']
     expect(htmlEntry.css.length).toEqual(1)
     expect(htmlEntry.assets.length).toEqual(1)
     expect(cssAssetEntry?.file).not.toBeUndefined()
+    expect(cssAssetEntry?.isEntry).toEqual(true)
+    expect(scssAssetEntry?.file).not.toBeUndefined()
+    expect(scssAssetEntry?.src).toEqual('nested/blue.scss')
+    expect(scssAssetEntry?.isEntry).toEqual(true)
     expect(imgAssetEntry?.file).not.toBeUndefined()
+    expect(imgAssetEntry?.isEntry).toBeUndefined()
   })
 })
 

playground/backend-integration/frontend/entrypoints/nested/blue.scss

@@ -0,0 +1,5 @@
+$primary: #cc0000;
+
+.text-primary {
+  color: $primary;
+}

playground/backend-integration/package.json

@@ -8,10 +8,9 @@
     "debug": "node --inspect-brk ../../packages/vite/bin/vite",
     "preview": "vite preview"
   },
-  "dependencies": {
-    "tailwindcss": "^3.1.3"
-  },
   "devDependencies": {
+    "sass": "^1.52.3",
+    "tailwindcss": "^3.1.3",
     "fast-glob": "^3.2.11"
   }
 }