MVC4 bundling: Minification failed because of css3-feature?

Question

I want to use MVC4 bundling and minification, but I always get this error message as comment in my not minified css file:

/* Minification failed. Returning unminified contents.
(534,29): run-time error CSS1019: Unexpected token, found ' '
(534,29): run-time error CSS1019: Unexpected token, found ' '
(534,29): run-time error CSS1042: Expected function, found ' '
(534,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(535,26): run-time error CSS1019: Unexpected token, found ' '
(535,26): run-time error CSS1019: Unexpected token, found ' '
(535,26): run-time error CSS1042: Expected function, found ' '
(535,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(536,25): run-time error CSS1019: Unexpected token, found ' '
(536,25): run-time error CSS1019: Unexpected token, found ' '
(536,25): run-time error CSS1042: Expected function, found ' '
(536,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(537,24): run-time error CSS1019: Unexpected token, found ' '
(537,24): run-time error CSS1019: Unexpected token, found ' '
(537,24): run-time error CSS1042: Expected function, found ' '
(537,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
 */

The corresponding lines in CSS are:

width: -webkit-calc(100% - 0.5em);
width: -moz-calc(100% - 0.5em);
width: -ms-calc(100% - 0.5em);
width: -o-calc(100% - 0.5em);

What can I do for minification to work with css3's calc feature?

Answer 1

I'm not sure you'll be able to use it in the current implementation. I think you have two things working against you here.

1. Per http://www.w3.org/standards/techs/css#w3c_all nearly everything is still a working draft. It probably isn't worth the effort to implement something in System.Web.Optimization if it's going to change, and cause more issues in the long term.

2. calc() is currently apart of CSS Values and Units Module Level 3 which states:

   The following features are at-risk and may be dropped during the CR period: 'calc()', 'toggle()', 'attr()'."

So with those things, Microsoft may not be on the bleeding edge of CSS3. Granted, this is more than likely a bug since that syntax isn't completely off the wall. Hopefully they open source System.Web.Optimization soon so people could fix issues like this. But they've been promising to open source it for nearly a year now.

In the meantime, you could try to prebundle the file locally on your machine where you have a lot of control over it. Or maybe try a different bundling/minification system like Cassette .

Answer 2

I answer my own question to tell you that I use Bundle Transformer now in connection with YUI Compressor . This works really fine and the syntax is very similar to the Microsoft way.
Have a look at it!