CSS : Whitespaces removed around operator of calc() function

[brivalin]

I'm facing a problem when optimizing CSS files containing the CSS function calc(), whitespaces inside this function are removed.

This problem only appear from 2.5.0 version. Previous versions didn't remove these whitespaces.

To be interpreted by browsers, the calc() function must have whitespaces around operator '-' or '+'.
Then, the expected behavior should be to not remove whitespaces for calc() function.

To reproduce the problem, you can use this CSS code and optimize it with plugin :
height: calc(100vh - 20px);

You should get this :
height: calc(100vh-20px);

[melloware]

See: #75

[melloware]

So you are saying

height: calc(100vh - 20px);

Should stay

height: calc(100vh - 20px); ?

[melloware]

Hmm can you also look at the unit test in the commit?

f95ee29

[brivalin]

So you are saying

height: calc(100vh - 20px);

Should stay

height: calc(100vh - 20px); ?

Yes, Chrome says that :
calc(100vh - 20px) is valid
but all
calc(100vh -20px) is invalid
calc(100vh- 20px) is invalid
calc(100vh-20px) is invalid

[melloware]

let me update the unit test

[melloware]

Good catch! It was missing vh see my commit and updated unit test. a5de5c4

[brivalin]

Thank you for the correction 👍
But from this correction I don't understand why It worked in 2.4.1 version and not 2.5.x ?

[melloware]

I think its because of #75 that I fixed actually made this issue exposed. Before 75 the code must have handled this scenario but not the other one. Very interesting. I will release 2.5.2 tomorrow!

[melloware]

2.5.2 is in Maven Central if you want to give it a try.

[brivalin]

I updated to 2.5.2 and it works as expected.
Thank you ! 🙂

[melloware]

Thanks for reporting it and testing it!