Optimize generated CSS output

[RobinMalfait]

This PR improves the generated CSS by running it through Lightning CSS twice.Right now Lightning CSS merges adjacent at-rules and at the end flattens the nesting. This means that after the nesting is flattened, the at-rules that are adjacent and could be merged together will not be merged.

This PR improves our output by running Lightning CSS twice on the generated CSS which will make sure to merge adjacent at-rules after the nesting is flattened.

Note: in the diff output you'll notice that some properties are duplicated. These need some fixes in Lightning CSS itself but they don't break anything for us right now.

Related PR in Lightning CSS for the double -webkit-backdrop-filter can be found here: parcel-bundler/lightningcss#850

[adamwathan]

Hard to tell from just the diff — is this change applied just to production builds or to dev and production? Also any chance you have benchmarked it on a realistic codebase? That would help to know if we should only do this in production or if it's fine to do it all the time.

[RobinMalfait]

It's always applied whenever we use Lightning CSS. For example in the CLI we don't use --minify or --optimize, which means that we won't hit this code path.

But if you do use --minify or --optimize then each optimize() call takes ~6ms when running it on Catalyst for example.

[5.50ms] optimize()
[5.59ms] optimize()
[11.10ms] optimizeCss()

[philipp-spiess]

Any idea why the postcss snapshot now has three -webkit-text-decoration: inherit; on the a tag lol

I think this makes sense and I'd rather pay a small compile time fee of a few ms instead of expensive egress charges because the CSS can be more optimized 😅 We should explain with an example why we do this, though. transform(transform(foo)) looks like a typo otherwise 😄

[philipp-spiess]

I wonder if we can get away with running optimize just once if lightningcss is configured as the CSS processor... It might have a different config so probably not 😬

[RobinMalfait]

Yeah that's tricky. Our config sets Safari to a version that doesn't understand nesting yet.

One suggestion that Devon had was to put @media queries on the outside instead of nested to do the merging, but the current change is a bit easier especially once Lightning CSS can handle this natively.