Skip to content

Comments

fix: include file names in CSS minification warnings#21634

Open
pierreeurope wants to merge 1 commit intovitejs:mainfrom
pierreeurope:fix/css-minify-warning-filenames
Open

fix: include file names in CSS minification warnings#21634
pierreeurope wants to merge 1 commit intovitejs:mainfrom
pierreeurope:fix/css-minify-warning-filenames

Conversation

@pierreeurope
Copy link

Description

Fixes #15915

When CSS minification (via esbuild or lightningcss) produces warnings or errors, they now display the actual filename instead of generic placeholders like <stdin> or style.css. This makes it significantly easier to debug which CSS file has the issue.

Changes

  • Added an optional filename parameter to the minifyCSS() function
  • Passed it to esbuild's sourcefile option to provide context in warnings/errors
  • Passed it to lightningcss's filename option (addressing the existing TODO comment)
  • Updated finalizeCss() to accept and forward the filename parameter
  • Updated all call sites to pass the actual filename when available:
    • For single-file CSS (e.g., ?inline imports): uses the actual file path
    • For aggregated CSS chunks: uses the chunk name or CSS asset name
    • For extracted CSS: uses the CSS bundle name

Before

warnings when minifying css:
▲ [WARNING] Unexpected "{" [css-syntax-error]

    <stdin>:484:1:
      484 │  {
          ╵  ^

After

warnings when minifying css:
▲ [WARNING] Unexpected "{" [css-syntax-error]

    path/to/actual/file.css:484:1:
      484 │  {
          ╵  ^

Related

  • This is a fresh implementation inspired by the approach in feat(css): provide filename for css-minify error #16006, but simplified to avoid the complexity of line mapping for concatenated CSS
  • The fix covers the most common use case (single-file minification warnings) while also providing better context for aggregated chunks
  • All existing tests pass

Checklist

  • Read the Contributing Guidelines
  • Checked that there isn't already a PR that solves the problem
  • Provided a description of what the PR solves
  • Ran existing tests to ensure nothing breaks

When CSS minification (via esbuild or lightningcss) produces warnings
or errors, they now show the actual filename instead of generic names
like '<stdin>' or 'style.css', making it much easier to debug which
CSS file has the issue.

This change:
- Adds an optional 'filename' parameter to minifyCSS() function
- Passes it to esbuild's 'sourcefile' option
- Passes it to lightningcss's 'filename' option (replacing the TODO)
- Updates finalizeCss() to accept and forward the filename parameter
- Updates all call sites to pass the actual filename when available

For single-file CSS (e.g., ?inline imports), the actual file path is
used. For aggregated CSS chunks, the chunk name or CSS asset name is
used to provide context.

Fixes vitejs#15915

Signed-off-by: pierreeurope <pierre.europe@pm.me>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CSS minification warnings don't contain file names, making them difficult to track down

1 participant