Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Jammit fails when CSS contains a data-uri #230

Closed
jakemauer opened this Issue · 2 comments

2 participants

@jakemauer

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
Owner

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

@jashkenas jashkenas closed this
@jakemauer

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.