feat(css): provide filename for css-minify error

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

@@ -7,6 +7,7 @@ import postcssrc from 'postcss-load-config'
 import type {
   ExistingRawSourceMap,
   ModuleFormat,
+  OutputAsset,
   OutputChunk,
   RenderedChunk,
   RollupError,
@@ -64,11 +65,12 @@ import {
   removeUrlQuery,
   requireResolveFromRootWithFallback,
   slash,
+  splitRE,
   stripBase,
   stripBomTag,
   urlRE,
 } from '../utils'
-import type { Logger } from '../logger'
+import { type Logger } from '../logger'
 import { addToHTMLProxyTransformResult } from './html'
 import {
   assetUrlRE,
@@ -245,6 +247,14 @@ function encodePublicUrlsInCSS(config: ResolvedConfig) {
   return config.command === 'build'
 }
 
+function getLineCount(str: string): number {
+  const lines = str.match(splitRE)
+  if (lines == null) {
+    return 0
+  }
+  return lines.length + 1
+}
+
 const cssUrlAssetRE = /__VITE_CSS_URL__([\da-f]+)__/g
 
 /**
@@ -530,7 +540,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       } else if (inlined) {
         let content = css
         if (config.build.cssMinify) {
-          content = await minifyCSS(content, config, true)
+          content = await minifyCSS(content, config, true, id, [
+            { file: id, end: getLineCount(content) },
+          ])
         }
         code = `export default ${JSON.stringify(content)}`
       } else {
@@ -549,13 +561,18 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
     async renderChunk(code, chunk, opts) {
       let chunkCSS = ''
+      let line = 0
+      const concatCssEndLines: Array<{ file: string; end: number }> = []
       let isPureCssChunk = true
       const ids = Object.keys(chunk.modules)
       for (const id of ids) {
         if (styles.has(id)) {
           // ?transform-only is used for ?url and shouldn't be included in normal CSS chunks
           if (!transformOnlyRE.test(id)) {
-            chunkCSS += styles.get(id)
+            const content = styles.get(id)!
+            chunkCSS += content
+            line += getLineCount(content)
+            concatCssEndLines.push({ file: id, end: line })
             // a css module contains JS, so it makes this not a pure css chunk
             if (cssModuleRE.test(id)) {
               isPureCssChunk = false
@@ -675,7 +692,18 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       await urlEmitQueue.run(async () =>
         Promise.all(
           urlEmitTasks.map(async (info) => {
-            info.content = await finalizeCss(info.content, true, config)
+            info.content = await finalizeCss(
+              info.content,
+              true,
+              config,
+              info.originalFilename,
+              [
+                {
+                  file: info.originalFilename,
+                  end: getLineCount(info.content),
+                },
+              ],
+            )
           }),
         ),
       )
@@ -720,22 +748,24 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
       if (chunkCSS) {
         if (config.build.cssCodeSplit) {
+          const cssFullAssetName = ensureFileExt(chunk.name, '.css')
+          // if facadeModuleId doesn't exist or doesn't have a CSS extension,
+          // that means a JS entry file imports a CSS file.
+          // in this case, only use the filename for the CSS chunk name like JS chunks.
+          const cssAssetName =
+            chunk.isEntry &&
+            (!chunk.facadeModuleId || !isCSSRequest(chunk.facadeModuleId))
+              ? path.basename(cssFullAssetName)
+              : cssFullAssetName
+
           if (opts.format === 'es' || opts.format === 'cjs') {
             if (isPureCssChunk) {
               // this is a shared CSS-only chunk that is empty.
               pureCssChunks.add(chunk)
             }
 
             const isEntry = chunk.isEntry && isPureCssChunk
-            const cssFullAssetName = ensureFileExt(chunk.name, '.css')
-            // if facadeModuleId doesn't exist or doesn't have a CSS extension,
-            // that means a JS entry file imports a CSS file.
-            // in this case, only use the filename for the CSS chunk name like JS chunks.
-            const cssAssetName =
-              chunk.isEntry &&
-              (!chunk.facadeModuleId || !isCSSRequest(chunk.facadeModuleId))
-                ? path.basename(cssFullAssetName)
-                : cssFullAssetName
+
             const originalFilename = getChunkOriginalFileName(
               chunk,
               config.root,
@@ -746,7 +776,13 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
             // wait for previous tasks as well
             chunkCSS = await codeSplitEmitQueue.run(async () => {
-              return finalizeCss(chunkCSS, true, config)
+              return finalizeCss(
+                chunkCSS,
+                true,
+                config,
+                cssAssetName,
+                concatCssEndLines,
+              )
             })
 
             // emit corresponding css file
@@ -768,7 +804,13 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             // But because entry chunk can be imported by dynamic import,
             // we shouldn't remove the inlined CSS. (#10285)
 
-            chunkCSS = await finalizeCss(chunkCSS, true, config)
+            chunkCSS = await finalizeCss(
+              chunkCSS,
+              true,
+              config,
+              cssAssetName,
+              concatCssEndLines,
+            )
             let cssString = JSON.stringify(chunkCSS)
             cssString =
               renderAssetUrlInJS(
@@ -886,38 +928,73 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         })
       }
 
-      function extractCss() {
+      async function extractCss() {
         let css = ''
-        const collected = new Set<OutputChunk>()
+        let line = 0
+        const collected = new Set<OutputAsset | OutputChunk>()
+        const concatCssEndLines: Array<{ file: string; end: number }> = []
         const prelimaryNameToChunkMap = new Map(
           Object.values(bundle)
             .filter((chunk): chunk is OutputChunk => chunk.type === 'chunk')
             .map((chunk) => [chunk.preliminaryFileName, chunk]),
         )
 
-        function collect(fileName: string) {
+        function collect(fileName: string): string {
           const chunk = bundle[fileName]
-          if (!chunk || chunk.type !== 'chunk' || collected.has(chunk)) return
-          collected.add(chunk)
+          if (!chunk || chunk.type !== 'chunk') {
+            collected.add(chunk)
+            return ''
+          }
+          if (collected.has(chunk)) {
+            return ''
+          }
+
+          const css = chunkCSSMap.get(chunk.preliminaryFileName) ?? ''
+          const importedCSS = chunk.imports.reduce((css, file) => {
+            const imported = collect(file)
+            if (imported.length > 0) {
+              return css + '\n' + imported
+            }
+            return css
+          }, '')
 
-          chunk.imports.forEach(collect)
-          css += chunkCSSMap.get(chunk.preliminaryFileName) ?? ''
+          return importedCSS + '\n' + css
         }
 
-        for (const chunkName of chunkCSSMap.keys())
-          collect(prelimaryNameToChunkMap.get(chunkName)?.fileName ?? '')
+        for (const chunkName of chunkCSSMap.keys()) {
+          const filename = prelimaryNameToChunkMap.get(chunkName)?.fileName
+          if (!filename) {
+            continue
+          }
 
-        return css
+          const cssCode = collect(filename)
+
+          if (cssCode) {
+            line += getLineCount(cssCode)
+            concatCssEndLines.push({ file: filename, end: line })
+
+            css += cssCode
+          }
+        }
+
+        return await finalizeCss(
+          css,
+          false,
+          config,
+          undefined,
+          concatCssEndLines,
+        )
       }
-      let extractedCss = !hasEmitted && extractCss()
-      if (extractedCss) {
-        hasEmitted = true
-        extractedCss = await finalizeCss(extractedCss, true, config)
-        this.emitFile({
-          name: cssBundleName,
-          type: 'asset',
-          source: extractedCss,
-        })
+      if (!hasEmitted) {
+        const extractedCss = await extractCss()
+        if (extractedCss) {
+          hasEmitted = true
+          this.emitFile({
+            name: cssBundleName,
+            type: 'asset',
+            source: extractedCss,
+          })
+        }
       }
     },
   }
@@ -1530,13 +1607,15 @@ async function finalizeCss(
   css: string,
   minify: boolean,
   config: ResolvedConfig,
+  filename: string | undefined,
+  concatCssEndLines: Array<{ file: string; end: number }>,
 ) {
   // hoist external @imports and @charset to the top of the CSS chunk per spec (#1845 and #6333)
   if (css.includes('@import') || css.includes('@charset')) {
     css = await hoistAtRules(css)
   }
   if (minify && config.build.cssMinify) {
-    css = await minifyCSS(css, config, false)
+    css = await minifyCSS(css, config, false, filename, concatCssEndLines)
   }
   return css
 }
@@ -1771,6 +1850,8 @@ async function minifyCSS(
   css: string,
   config: ResolvedConfig,
   inlined: boolean,
+  filename: string | undefined,
+  concatCssEndLines: Array<{ file: string; end: number }>,
 ) {
   // We want inlined CSS to not end with a linebreak, while ensuring that
   // regular CSS assets do end with a linebreak.
@@ -1781,7 +1862,7 @@ async function minifyCSS(
       ...config.css?.lightningcss,
       targets: convertTargets(config.build.cssTarget),
       cssModules: undefined,
-      filename: cssBundleName,
+      filename: filename || 'style.css',
       code: Buffer.from(css),
       minify: true,
     })
@@ -1804,6 +1885,23 @@ async function minifyCSS(
       ...resolveMinifyCssEsbuildOptions(config.esbuild || {}),
     })
     if (warnings.length) {
+      if (concatCssEndLines && concatCssEndLines.length > 0) {
+        for (const warning of warnings) {
+          if (warning.location) {
+            const { line } = warning.location
+            let start = 1
+            for (const { file, end } of concatCssEndLines) {
+              // reassign the file and line number to the original file
+              if (start <= line && line <= end) {
+                warning.location.file = file
+                warning.location.line = line - start + 1
+                break
+              }
+              start = end
+            }
+          }
+        }
+      }
       const msgs = await formatMessages(warnings, { kind: 'warning' })
       config.logger.warn(
         colors.yellow(`warnings when minifying css:\n${msgs.join('\n')}`),

packages/vite/src/node/utils.ts

@@ -474,7 +474,7 @@ export function isFilePathESM(
   }
 }
 
-const splitRE = /\r?\n/
+export const splitRE = /\r?\n/g
 
 const range: number = 2