MVC Bundling breaking my calc CSS statements by removing spaces?
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.
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);
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
);
}
}
}
}