Description

Currently, I'm looking a CSS minification warning that looks like this:

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

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

This is fairly difficult to track down, as the user needs to go one-by-one to try to figure out which module has an open brace on line 484.

Sometimes this is easier to track down, given a class name or a bit of syntax is shown in the warning, like in the following:

warnings when minifying css:
▲ [WARNING] Transforming this CSS nesting syntax is not supported in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14") [unsupported-css-nesting]

    <stdin>:3:19:
      3 │     div[id*='app'] & {
        ╵                    ^

  The nesting transform for this case must generate an ":is(...)" but the configured target environment does not support the ":is" pseudo-class.

Position info is again pretty hard to use, but the content is at least something we can grep for without too much trouble.

This particular warning can be reproduced with the following CSS content, if it's helpful:

body {
  h1 {
    div[id*='app'] & {
      color: red;
    }
  }
}

Just stick a <link rel="stylesheet" href"./style.css"> in the HTML entry and you're good to reproduce.

(I fully appreciate this is pretty nasty CSS, I'm working to migrate some old LESS and this is what I'm workin' with at the moment)

Suggested solution

If possible, a file name in the warning message would be ideal, else, perhaps some more context in the warning, like the line above & below?

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.