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

[rschristian]

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.

[runfaj]

Also stuck on this error recently.

 warnings when minifying css:
 ▲ [WARNING] Unexpected "{" [css-syntax-error]
     <stdin>:2:1:
       2 │  {
         ╵  ^

However, I'm unable to find anywhere that would explain this in our application. All of the scss files we have seem to appear correct, and most our other styling is through any 3rd party packages (like tailwind), so tracing down is about impossible without knowing more details. I can see a PR was created, but hasn't had any traction for a couple weeks.

[rschristian]

Are you using CSS modules by chance? I seem to recall that's where I was seeing it the most. Seems like it would drop :global in some cases, resulting in those syntax errors.

Specifically the following:

:global {
  .bar {
    color: blue
  }
}

I can't pretend that I'm too familiar with the CSS Modules spec, but this syntax is supported elsewhere but not by Vite.

[runfaj]

@rschristian I do have 1 module file that has a :global reference. Commenting that out does seem to fix it in this case, but I definitely would have never thought of that, especially since this is supported in other non-vite apps I've worked with just fine.

[rschristian]

For the above example, that can be switched to the following to fix it:

:global(.bar) {
  ...
}

I was only able to find this as the error message was pointing to a rather high line count (484) that only a few of our files hit. Went one-by-one until I found the culprit.

[runfaj]

Thanks for the tip! That will work for our case for the immediate fix.