Css minification with unicode "content" properties

174 views
Skip to first unread message

Groo

unread,
Apr 29, 2013, 7:21:19 PM4/29/13
to squi...@googlegroups.com
I am minifying a bunch of CSS files, and some of them use the CSS content property to insert actual content before or after certain selectors.

For example, Font Awesome contains a lot of styles like this:  

  .icon-refresh:before  { content: "\f021"; }

But after minification, the character gets rendered as an actual character (and then ignored by the browser):

  .icon-refresh:before{content:"";}

Is this a known issue which can be fixed?

Thanks!

Alex Ullrich

unread,
Apr 30, 2013, 8:34:09 AM4/30/13
to squi...@googlegroups.com
It looks like this is a bug in the MS minifier - when I try to write a failing test it takes ~2 minutes to process the one line of CSS you have there, and spits out an empty string.  

Try using the YuiMinifier - it worked on the CSS you posted and will hopefully resolve your problem.  You can configure it globally in application_start using:

Bundle.ConfigureDefaults().UseMinifierForCss<YuiMinifier>();

Or on the bundle level using:
Bundle.Css().WithMinifier(new YuiMinifier()).Add("")... 

Hope this helps,

Alex
Reply all
Reply to author
Forward
0 new messages