search

digitalsparky / jekyll-minifier

Jekyll HTML/XML/CSS/JS Minifier utilising yui-compressor, and htmlcompressor
GNU General Public License v3.0
245 stars 25 forks source link

CSS Minifying svg in background-image #50

Open jdbruxelles opened 5 years ago

jdbruxelles commented 5 years ago

Hi there,

I use jekyll-minifier on some of my projects but when I put an svg tag as background image in a css file, the value of background-image, url(SVG) is minified too. Spaces between attributes and between points are removed and the data:image become invalide.

So 

background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"/%3E%3C/svg%3E');

become

background-image:url('data:image/svg+xml,%3Csvgwidth="64"height="64"viewBox="006464"xmlns="http://www.w3.org/2000/svg"%3E%3Cpathd="M816c4.41808-3.5828-8s-3.582-8-8-8-83.582-883.582888zm0-2c3.31406-2.6866-6s-2.686-6-6-6-62.686-662.686666zm33.414-6l5.95-5.95L45.95.636406.58634.05.63632.6362.0538.5868l-5.955.951.4141.414L409.414l5.955.951.414-1.414L41.4148zM4048c4.41808-3.5828-8s-3.582-8-8-8-83.582-883.582888zm0-2c3.31406-2.6866-6s-2.686-6-6-6-62.686-662.686666zM9.41440l5.95-5.95-1.414-1.414L838.586l-5.95-5.95L.63634.056.58640l-5.955.951.4141.414L841.414l5.955.951.414-1.414L9.41440z"fill="%239C92AC"fill-opacity="0.4"fill-rule="evenodd"/%3E%3C/svg%3E');

Is there a way to avoid that ? Or can you do something about that, please ?

Gizmokid2005 commented 4 years ago

Came here to +1 this. I was just noticing that my toggle icons were missing when CSS was being minified because the URLs were being touched.

This: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") is getting minified as url("data:image/svg+xml,%3csvgviewBox='003030'xmlns='http://www.w3.org/2000/svg'%3e%3cpathstroke='%23fff'stroke-width='2'stroke-linecap='round'stroke-miterlimit='10'd='M47h22M415h22M423h22'/%3e%3c/svg%3e")

Gizmokid2005 commented 4 years ago

It looks like this could probably be addressed by using this for of cssminify2: https://github.com/bbbenji/cssminify

@digitalsparky is this something you can update in your specs? It appears that we're still pulling in your fork from rubygems instead of this one.

**EDITED to confirm that this solves the url minifying.

@jdbruxelles adding this to your Gemfile will fix this.

gem "cssminify2", :git => 'https://github.com/bbbenji/cssminify'
digitalsparky commented 4 years ago

I've merged the changes in that fork, packages are auto building and will auto deploy once complete.

digitalsparky commented 4 years ago

Hmm, looks like that patch fails testing, will investigate further when i can, if anyone finds the answer please create a pull req and i'll merge.

Gizmokid2005 commented 4 years ago

Hmm, looks like that patch fails testing, will investigate further when i can, if anyone finds the answer please create a pull req and i'll merge.

The merge is failing because the test is incorrect. The test is expecting for all spaces to be removed from any url() params, which this fix explicitly doesn't do, so thus, it fails.

Specifically this test: Failure/Error: CSSminify2.compress(File.read(file)).chomp.strip.should eq(File.read(file + '.min').chomp.strip) is failing because it's incorrect, it doesn't account for spaces in url()s which is incorrect for a proper fixed version of cssminify. Unfortunately I don't have any suggestions for a fix other than removing this test, or removing this particular test spec which is also wrong for a proper url() treatment: digitalsparky/cssminify/spec/tests/dataurl-base64-doublequotes.css

***EDIT @digitalsparky just proposed a PR that fixes the .min version of the broken test to act appropriately. This feels like the correct fix to me.

Pleune commented 2 years ago

It appears that this is fixed, and all it needs to start functioning is for the version of digitalsparky/cssminify to be bumped and deployed.

cdown commented 2 years ago

Hey there! Just checking if there's any update on when the versions will be bumped? Running into this as well.

angel-carvajal commented 1 year ago

Any update on this?

arbesulo commented 1 year ago

also having that problem. I have tried to open an issue on https://github.com/digitalsparky/cssminify but there issue reporting is disabled :(