MVC Bundling breaking my calc CSS statements by removing spaces?

user_1170221 0
Viewed 4817

I have css statements like this: 

margin-left: calc(50% - 480px);

Which work fine unminified but as soon as I begin minifying, the statement gets changed to: 

margin-left: calc(50%- 480px);

Rendering all calc statements broken. Similar things happen with width, max-width, min-width, etc. Is there any way I can change the behavior of the bundle to leave those CSS properties alone?

Currently I'm just using bundles.Add(new Bundle()) to prevent minification entirely, but it would be nice if I could minify correctly.

bundling-and-minification asp.net-mvc-4 asp.net-mvc-3 asp.net-mvc
7 Answers

No idea why but calc((50%) - 480px) didnt work for me, however the following worked:

subtraction:

margin-left: calc(((100%) - (480px)))

addition:

margin-left: calc((100%) - -480px)
user_42922690

Beware of using variables in calc. You can end up with another CssMinify() bug:

@myVariable: 0em;
margin-left: calc((50%) - @myVariable);

is compressed and unit is cut off:

margin-left: calc((50%) - 0);

and it is not valid calc() call too!

user_19777990

It seems the issue has been fixed in the version 2.4.9 of YUI Compressor, which can be accessed from here https://mvnrepository.com/artifact/com.yahoo.platform.yui/yuicompressor?repo=bsi-business-systems-integration-ag-scout. I have used this css file:

body{
    font-size: calc(50% - 3px);
    font-size: calc(50% + 3px);
    font-size: calc(50% + +3px);
    font-size: calc((50%) + (3px));
    font-size: calc(50% + (+3px));
    font-size: calc(50% + (3px));
    font-size: calc(50% - (-3px));
    font-size: calc(50% - -3px);
}

and running this command:

java -jar yuicompressor-2.4.9-BSI-2.jar --line-break 0 -o process.css.min.gz file.css

generates this output, which looks good:

body{font-size:calc(50% - 3px);font-size:calc(50% + 3px);font-size:calc(50% + +3px);font-size:calc((50%)+(3px));font-size:calc(50% + (+3px));font-size:calc(50% + (3px));font-size:calc(50% - (-3px));font-size:calc(50% - -3px)}
user_12086220
Related