search

documentcloud / jammit

Industrial Strength Asset Packaging for Rails
http://documentcloud.github.com/jammit/
MIT License
1.16k stars 197 forks source link

Jammit fails when CSS contains a data-uri #230

Closed jakemauer closed 12 years ago

jakemauer commented 12 years ago

I'm using guard with Compass and Jammit for my project. If I use Compass' inline-image function to produce a data-uri in the CSS, Jammit fails to compress my CSS. If I remove the data-uri line, compression works fine.

I don't want to use Jammit's built in data-uri functions because I only want to use it for specific images to keep our CSS file size down.

An example of the CSS output by Compass that causes the error:

  background: url('dataimage/pngbase64,/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEIzQTc5REI4MzNCMTFFMTgxNEY5MzkxQ0E4RUMwREIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEIzQTc5REM4MzNCMTFFMTgxNEY5MzkxQ0E4RUMwREIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4QjNBNzlEOTgzM0IxMUUxODE0RjkzOTFDQThFQzBEQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4QjNBNzlEQTgzM0IxMUUxODE0RjkzOTFDQThFQzBEQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjFnMl0AAAIZSURBVHjaXFJNq9pQEM1Nrl8RlWpbiYJCKCrUzXt00724bruo7vwJ/gHd+x8Ef4YL0Z0Ir9iFCqXQR10ILVJjK0mM5rNnHlWkF4bczMyZOXPmsiAIhMupVCqyKIpvJElSYC8ZYyLsB3K2nuc9LJfL8yWXXYDlcrnEOf8QjUa9eDxu4HuKRCI2xVzX5Y7jMFyn4/H48QoslUplgD4mEok/mUxGSyaTx1gs5oTDYY+SbNuWLMsKHQ6HuKIoXweDwWeuqqoM0DskEmibTqcN3N1ut+uALmu320l0t+GzkGfv93t1NBppou/7b5FA9DQEDfy7xKJQKPj5fP5hvV4/2+120fP5HFAMLIzFYvGaI+kVKumhUMiEAO7xeBTgo3mIpgl61PGIeaETI0G81WolETAFx09UcwhE51ZpEgXzMYoh78mHu8+hmI9ODgTwkCT8f8gHmsItEAw9EcDfp9NJME3zapqmCfP5nGez2Rcoymm+2zj0CDg6fQeVPKpBI8n91yhoNBppUH6Pu47iDnKu/KvVasCATsiy3ADoFyhYFIBywmQycXRdF2u1WhYxHXa+xIbDoSsahqFjDZ9AQcYctOgnOvAL2OUX8sPHyU+GvXp4Ze71yTWbzbvZbKZiPgu0PagsY77nFCM2qVTK6vV6bqvVojU9slvpp9Op0u/37/EVN5sNrYXncjm/Xq+fOp2OXSwWSfZvsO1fAQYAQzpZOb7bzIoAAAAASUVORK5CYII=') no-repeat 0 2px;
jashkenas commented 12 years ago

That wouldn't be a problem with Jammit -- that'd be a problem with your CSS compressor (in this case, probably YUI), right?

In any case, I don't see why you'd inline images before, given that Jammit can inline them perfectly well for you:

http://documentcloud.github.com/jammit/#embedding

jakemauer commented 12 years ago

Whelp, I'm a dummy. I didn't really think through how Jammit works and didn't even think to check YUI Compressor. Turns out this bug was fixed in a recent build (2.4.7) which has yet to be pulled in to YUI-Compressor-Ruby. As for not using Jammit's inline-ing, I'm hamstrung by how the site I'm working on was built. Currently we serve 5 separate stylesheets based on site location and can't load everything into a single sheet due to overlap issues. (I know this is bad, but I can't change it ATM) so I have to use Compass' inline-ing.

I'll use a custom version of YUI-Compressor-Ruby and be on my way. Thanks for the quick reply!