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,
@@ -62,6 +63,7 @@ import {
  removeDirectQuery,
  removeUrlQuery,
  requireResolveFromRootWithFallback,
+ splitRE,
  stripBase,
  stripBomTag,
  urlRE,
@@ -244,6 +246,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
 
 /**
@@ -529,7 +539,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 {
@@ -548,13 +560,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
@@ -674,7 +691,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),
+ },
+ ],
+ )
  }),
  ),
  )
@@ -719,22 +747,23 @@ 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,
@@ -745,7 +774,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
@@ -767,7 +802,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(
@@ -885,38 +926,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
+ }
+
+ const cssCode = collect(filename)
+
+ if (cssCode) {
+ line += getLineCount(cssCode)
+ concatCssEndLines.push({ file: filename, end: line })
+
+ css += cssCode
+ }
+ }
 
- return css
+ 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,
+ })
+ }
  }
  },
  }
@@ -1529,13 +1605,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
 }
@@ -1770,6 +1848,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.
@@ -1780,7 +1860,7 @@ async function minifyCSS(
  ...config.css?.lightningcss,
  targets: convertTargets(config.build.cssTarget),
  cssModules: undefined,
- filename: cssBundleName,
+ filename: filename || cssBundleName,
  code: Buffer.from(css),
  minify: true,
  })
@@ -1803,6 +1883,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

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