MVC Bundling breaking my calc CSS statements by removing spaces?

Question

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.

Answer 1

This is an issue of the optimizer.

To avoid the miniffier to remove the whitespaces, group the affected element with parenthesis. That workarrounds the issue.

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

Answer 2

In addition to the answer above: if you use:

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

You should rewrite it as:

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

Since it didn't seem to fix (50%)+ for me.