Skip to content

fix(css): include file name in CSS minification warnings and errors#22524

Open
AliMahmoudDev wants to merge 1 commit into
vitejs:mainfrom
AliMahmoudDev:fix/css-minify-warning-filename
Open

fix(css): include file name in CSS minification warnings and errors#22524
AliMahmoudDev wants to merge 1 commit into
vitejs:mainfrom
AliMahmoudDev:fix/css-minify-warning-filename

Conversation

@AliMahmoudDev
Copy link
Copy Markdown

Summary

Fixes #15915

CSS minification warnings from both esbuild and lightningcss currently do not include the source file name in the warning/error message. This makes it extremely difficult to track down which CSS file caused the issue, especially in large projects with many CSS modules.

Before:

[esbuild css minify]
WARNING: Unexpected "{" (note: this is a CSS nesting feature)

  <stdin>:5:1:
    3 │   }
    4 │   div[id*="app"] {
  > 5 │     color: red;

After:

[esbuild css minify]
components/App.module.css: WARNING: Unexpected "{" (note: this is a CSS nesting feature)

  <stdin>:5:1:
    3 │   }
    4 │   div[id*="app"] {
  > 5 │     color: red;

Changes

  • esbuild warnings: Prepend file: prefix from warning.location.file to each formatted warning message
  • esbuild errors: Include filename in error message
  • lightningcss warnings: Include filename in the [lightningcss minify] prefix
  • lightningcss errors: Include filename in error message

Before/After Comparison

Minifier Before After
esbuild warn [esbuild css minify]\nWARNING: Unexpected "{" [esbuild css minify]\nstyle.css: WARNING: Unexpected "{"
lightningcss warn [lightningcss minify] Unexpected nesting [lightningcss minify] style.css\n Unexpected nesting
esbuild error [esbuild css minify] ERROR: ... [esbuild css minify] style.css\n ERROR: ...
lightningcss error [lightningcss minify] ERROR: ... [lightningcss minify] style.css\n ERROR: ...

Currently, CSS minification warnings from esbuild and lightningcss do not
include the source file name, making them hard to track down in projects
with many CSS modules.

Fixes vitejs#15915

Changes:
- esbuild warnings: prepend file name from warning.location.file to each
  formatted warning message
- esbuild errors: include file name in error message
- lightningcss warnings: include filename in warning prefix
- lightningcss errors: include filename in error message
@AliMahmoudDev
Copy link
Copy Markdown
Author

Hi maintainers! Just wanted to note that the zizmor CI failure on this PR is caused by a pre-existing issue in .github/workflows/ecosystem-ci-trigger.yml (line 134 - actions/create-github-app-token without restricted permissions). The same finding appears when running zizmor on the main branch, so it is not introduced by this PR's CSS-related changes.

All other checks (Build & Test, Lint) are passing. The PR only modifies CSS minification warning/error formatting in packages/vite/src/node/minify.ts.

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