4

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?

tereško
  • 58,060
  • 25
  • 98
  • 150
Oliver Kötter
  • 1,006
  • 11
  • 29

2 Answers2

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.

Steven V
  • 16,357
  • 3
  • 63
  • 76
  • Yeah... thanks. Obviously MS implemented more intelligence that I'd thought is needed for minification. I tried Cassette but had some other problems I can't remember right now... – Oliver Kötter Oct 14 '13 at 14:08
  • @Ollie Another idea would be to implement your own `IBundleTransform` and use a minifier that does work for what you want to do. Maybe more work than you're willing to do though. – Steven V Oct 14 '13 at 14:17
  • 1
    caniuse.com shows that actually all modern browsers support calc() and it really works fine. I decided to use a workaround described here: http://stackoverflow.com/a/18570513/1155881 Thanks Microsoft! ;-( Now minification works ok. – Oliver Kötter Oct 15 '13 at 16:02
1

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!

Oliver Kötter
  • 1,006
  • 11
  • 29