2.11.2 breaks css in my build (again)

[ssuess]

For some reason the css built by versions 2.11.2 and above broke my css. This happened in a previous update as well, but that problem was resolved by making sure there were no duplicate css @media block declarations. This time, I don't know what is going on since there are no such duplicates. And once again this does NOT happen in dev, only in BUILD. Even stranger, when I look at the css in dev tools and use chrome's pretty print button, the layout reverts to the way it should look. Something seems broken in the minification step for css, does anyone have any ideas?

[ssuess]

To be a little clearer: in BUILD, when my window is wider than 850px, the @media (min-width: 450px) rule is still taking precedence, even though there is a superceding @media (min-width: 850px) rule and even if I change the first media rule to @media (min-width: 450px) and (max-width: 849px) my @media (min-width: 850px) rule is STILL ignored in build (but not in dev)

[ssuess]

Turning off minify makes the build work, but at a terrible cost. What changed in the minify process from 2.11.2 or what new styles did quasar introduce that broke the minifier?

[ssuess]

Don't know why this works, but I have a solution: I have a :root {...} declaration that was at the top of my app.css file. Moving it to the bottom seem to have fixed this. WTF.

UPDATE: more specifically, it seems that css env() rules (such as --sat: env(safe-area-inset-top, 20px);) were the culprit. Moving these to the bottom or removing them from the :root declaration fixes the problem.

[rstoenescu]

Please note that 2.11.2 is the UI version. The UI package does NOT deal with compilation stuff. That would be the Quasar CLI (q/app-vite or q/app-webpack). And furthermore, we haven't changed anything related to CSS compilation in ages (we didn't have to).

[ssuess]

All well and good but I assure you reverting to 2.11.1 fixed the problem, with nothing else changed in the code on my end.