CSS minification breaks calc(), vendor update required

[jbma]

When CSS minification is enabled, calc() values will be minified as well, but need to be separated by spaces.
Current behavior: calc(1.5rem+2.5px)
Expected behavior: calc(1.5rem + 2.5px)

Reported by customer: https://secure.helpscout.net/conversation/210133386/16324/?folderId=714999
Original bug in lib fixed in February: mrclay/minify#503

[jbma]

Not sure whether I got it right in Slack: Is the library I referenced not the one we use? If it is not, the behavior (spaces being stripped) is still existent in WP Rocket, so I guess we still should do something about it.

[jbma]

Yes it's the right library (in the link above). We didn't update it since a long time, so we'll probably do it in the 2.9

[jbma]

Awesome, yes, let’s do that in 2.9. calc() isn’t the most critical CSS operation out there, but for people who do use it, the outdated behavior of our lib must be a real PITA. Will let the customer know we’ll most likely update it in 2.9.

[glueckpress]

✅ Spaces inside of calc() expressions are being preserved as expected with the current 2.9 branch. This goes for CSS files as well as for inline CSS.

Unrelated to the calc() issue, but maybe be worth noting because possibly (?) related to a vendor update: CSS files are not 100% minified, I see a lot of hard line-breaks being preserved, or new ones added. A properly minified file would usually be expected to contain only 1 long line of CSS.

[eugenem]

Hi! Some of calc() are still broken at 2.9.11
If you try to minify this file, for example: https://timetostepitup.com/wp-content/themes/aton-child/style.css

[Tabrisrp]

The remaining issues should be fixed in 2.10

[eugenem]

Thanks!

[shivampaw]

This still seems to exist in 2.10

[der-krueger]

Same here in 2.10.3

[Tabrisrp]

If you still have the issue, disable, save settings & re-enable CSS minification. It should work after.

[shivampaw]

@Tabrisrp not working.
https://www.shivampaw.com/ is the site. Scroll to bottom where the contact form is. The budget dropdown CSS isn't working - spaces in the calc function aren't there.

[Tabrisrp]

open a support ticket in that case, we'll look into it.

[JiveDig]

2.10.4 - We're still experiencing this issue.

[adamlaki]

2.10.12 - Unfortunately still an issue.

[glueckpress]

Can’t reproduce with 2.10.12, calc() is handled correctly:

Same in 2.11 (current development branch), spaces are preserved:

@adamlaki, @JiveDig Please open a support ticket if your issue can be reproduced. Thanks!

[CobbleWebDevUser]

HI there.
I reproduce on my side.

padding-top: calc(150px + 10vw);

becomes

padding-top:calc(150px+10vw);

But it occurs only with the "+" sign.

I found a work around which work for me by wrapping the code with a

@media all {
}

When the calc() is into a media query, the spaces around "+" sign are not removed.

[mkstix6]

WP-Rocket Version 3.2.6

Same here I think:

Original…

height: calc(3.25rem + 2px);

…is minified to…

height: calc(3.25rem+2px);

…without the spaces it breaks.

[zumek]

Issue still present in v 3.4.0.5

Is the plugin using yuicompressor? - yui/yuicompressor#59