MVC Bundling breaking my calc CSS statements by removing spaces? - asp.net-mvc

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.

Answer 3

If the default css minification is not doing what you need, you can always use a third party one.
bundling allows you to use your own transformations using IBundleTransform
var bundle = new Bundle("~/Content/css", myCustomCssTransform);
there are many different bundlers - nuget
for example you could use YUI compressor:
using System.IO;
using System.Web.Optimization;
using Yahoo.Yui.Compressor;
namespace Bundler.Utilities
{
public enum contentType
{
javascript,
css
}
public class YUITransform : IBundleTransform
{
readonly string _contentType = string.Empty;
public YUITransform(contentType contentType)
{
if (contentType == contentType.css)
{
this._contentType = "text/css";
}
else
{
this._contentType = "text/javascript";
}
}
public void Process(BundleContext context, BundleResponse bundle)
{
bundle.ContentType = this._contentType;
string content = string.Empty;
foreach (FileInfo file in bundle.Files)
{
using (StreamReader fileReader = new
StreamReader(file.FullName)) {
content += fileReader.ReadToEnd();
fileReader.Close();
}
}
bundle.Content = Compress(content);
}
string Compress(string content) {
if (_contentType == "text/javascript")
{
return JavaScriptCompressor.Compress(content);
}
else
{
return CssCompressor.Compress(content,
CssCompressionType.StockYuiCompressor
);
}
}
}
}

Answer 4

This is totally normal as referring to CSS Values and Units Module it states
The following features are at-risk and may be dropped during the CR
period: ‘calc()’, ‘toggle()’, ‘attr()’."
If you could skip the spaces there, that wouldn't be a complete minifying. An option is replacing spaces with unicode caracter \00A0

Answer 5

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)

Answer 6

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!

Answer 7

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)}