Show Lightning CSS warnings when optimizing/minifying in production

[RobinMalfait]

This PR improves the DX by showing all the Lightning CSS warnings when using a "production" build (or using --optimize or --minify flags when using the CLI).

Right now Tailwind CSS itself doesn't care about the exact syntax you are using in the CSS as long as it looks valid. We do this because otherwise we would have to parse a lot more CSS syntax and validate it even though it would be valid CSS in 99.99% of the cases.

Even worse, if you want to use newer CSS syntax that Tailwind CSS doesn't validate yet, then you would get warnings for valid CSS.

Another reason why we don't do this is because the browser already does a great job at ignoring invalid CSS.

So the linked issue #15872 would still silently fail in development mode. In this case, everything would work, except the shadow with the invalid syntax.

But in production mode, you would now get a proper warning from Lightning CSS, because they try to optimize the CSS and remove invalid CSS.

One potential issue here is that we run Lightning CSS on the generated CSS, not on the input CSS. So the current output shows the warnings in the output CSS not the input CSS. Any thoughts if we would just skip the line numbers?

Test plan

1. Everything works as before
2. In production mode, you would get warnings printed to the terminal. This is done in @tailwindcss/node so the CLI/Vite/PostCSS plugins would all get the same behavior.

Screenshots:

If you have a single issue:

If you have multiple issues:

Fixes: #15872

[RobinMalfait]

Update: I dropped the line numbers because I think those are more confusing because they don't actually map to the correct spot in the input. So I think just some indication that something went wrong is already a big improvement.

[philipp-spiess]

Let's not add a new dependency, especially when it's only like 30 LOC

[philipp-spiess]

Can we inline this dependency? https://unpkg.com/[email protected]/picocolors.js

Probably don't even need all of the options here

[RobinMalfait]

Inlined it 👍

Only reason I added the dependency is because we were already using it in other packages (@tailwindcss/cli and @tailwindcss/upgrade). But since we don't use it in the @tailwindcss/postcss or @tailwindcss/vite, you're right let's just inline them. If they were used there already it's not a big deal.

[philipp-spiess]

Also I think we probably want a way to silence these warnings, WDYT? Have you tried running e.g. tailwindcss.com CSS through it? Will it cause any unexpected warnings?

[RobinMalfait]

Also I think we probably want a way to silence these warnings, WDYT? Have you tried running e.g. tailwindcss.com CSS through it? Will it cause any unexpected warnings?

You sure? Running it on Tailwind Plus or tailwindcss.com doesn't result in any warnings. The warnings also only show up when using Lightning CSS which is typically only when you explicitly have --minify or --optimize in the CLI, or if you use NODE_ENV='production' in PostCSS / Vite land so it won't spam your development workflow.

[philipp-spiess]

Yeah that sounds good then 👍

[RobinMalfait]

Cleaning this up as well because nothing should change here now that I removed the dependency again.