CSS source files with unicode values are corrupted when parsed

[waynedenier]

I discovered this while attempting to use Font Awesome (http://fortawesome.github.com/Font-Awesome/) in my project. It consists of a font-awesome.css file with icon style declarations that look something like this...

.icon-glass:before                { content: "\f000"; }

I put this file in a /css directory with other .css files used in my site and used the following line to include all the style sheets...

bundles.AddPerSubDirectory<StylesheetBundle>("Content/css");

Debugging the Issue

• When I load the site with debug="false", the combined result of the "css" directory doesn't contain anything from font-awesome.
• If I put the file in a subdirectory (ie "css/fonts") the subdirectory stylesheet is not loaded.
• I can change the query string of a request for another bundle to try to load "css/fonts" and it does return a parsed file, but the unicode values are corrupted like this...

.icon-glass:before{content:""}

It seems as though when unicode is parsed, the characters are transformed. After this, the sheet will not load combined with any other files. Even loaded on it's own, after parsing the file is useless as the transformed unicode characters do not work in a browser.

This essentially means that Font Awesome will not work with the combiner and must be loaded separately outside of Cassette unminified.

[andrewdavey]

The css minifier (AjaxMin) is converting the unicode escape sequences into their equivalent unicode characters. If the CSS is then viewed with the incorrect encoding then I guess could result in the weird characters displayed.

However, I tried adding Font Awesome to the Cassette website and it seemed to work without issue in Chrome. The converted characters still worked for me.

What version of Cassette are you using? And what browsers are you testing in?

[andrewdavey]

What encoding are the original CSS files in? Is it something other than UTF-8?

[waynedenier]

Thanks for the response! After further exploration, I'm thinking the encoding isn't really the core issue. Even with minifier converting to the true unicode characters, the css does seem to work (it wasn't working before but that was due to a reference issue with the font face definition).

The only thing I still can't figure out is why when my config is set to debug="false" and it tries to combine font-awesome.css with the other style sheets in the directory, font-awesome is completely left out of the minified output. Are you seeing this as well?

Wayne

On Fri, Jan 25, 2013 at 7:45 AM, Andrew Davey [email protected]:

What encoding are the original CSS files in? Is it something other than UTF-8?

— Reply to this email directly or view it on GitHubhttps://github.com/andrewdavey/cassette/issues/353#issuecomment-12701159.

[andrewdavey]

I can't think why font awesome would be excluded. I'm not seeing that here.

It would be great if you can send me a basic reproduction of this issue i.e. a basic web project zipped up, emailed to [email protected]