Quotes and base64 question

[XhmikosR]

Should the quotes be removed in this case?

background: white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKIAAAAPBAMAAACVXgkYAAAAKlBMVEXx8fHy8vLz8/P09PT19fX29vb39/f4+Pj5+fn6+vr7+/v8/Pz9/f3///8eCkN/AAACqklEQVR4AV3TwW1bVxBG4deAS0gDjtmAEBUQg68BW7cBktMArbsNAlqzjyXNOsB7/PcO5VkHkDQN0Dy9BKGFBNDXwH8wwAwA3XXfPUsdjmbvrQEPHvMNrilXc3e13TbvA+DoSBZSFFQcWvsUhHvvSmCAF8vQwlYOVxV+pCDrefbLQ3bGvrISQJXiAfqmATzelHrPr35nvMjhc64X3VNAaD4ywrGddkrxShHW28e3W+snAN/kG6sWag5QSZmaD/9HAyhCBoeIkl2XsgCyMoKP7nm6XN+0nwVM8WDf9+PWOXvazeE1TW0x2G2YSdqNUcD1e18IyAjzCsnfaLk/Lo+hsLGqGQCjubZ9vOQsFwpdE2jS3VCBzG/8gI4B1Oc6fixgtI2Ns9wyFlcpP/W0DqB9w39pNleCetspUG3z0UyoBhAAkvLWMsC7dQl4ppt0vz+MHs9NARD7Pv3qGzwTyGmnGENjRvFiuPAo2RrgZHuToDy9rYvX2P7VY7ExtyZAYZcWX+/kBcB3mek2Bn9e+rY3/Rhtqb2DNW9GZclIgMJ2X3p+4Vlbc6DMpFP+fiUKIFh6bxZ8G3YyXSz25rnvghjHPgN+ulJ009tS/W02eRohzZ4A6au+0P26AGq7WcV3T4+nW98eBoCuksbAJtC7x9wsgOfatLKwtc+lT6v9xnI0AFarJlcaBbX3sIvp0/S2haIQA8VZGdbTi1MzyQVwf59//PiA+CBxtrxZTucPAKosw6SxPHnB4ErLBkD+OzY7qXXXsnde+5bd2mZc7DwBNgd5NxKA6impehvG6LHCAgH7o+xBMFr4fu4eBQLEKX31ZIVd24cScLxW/sRWnQLoT49dHriG/66SLRMUdiGIFufQ63H+s35b1mQ3ylG05gB+Do1+CIBz6ClU8+U76R+M+SNx6aw8NQAAAABJRU5ErkJggg==") repeat top right;

[GoalSmashers]

It is not needed. We'll include it into 2.0 too. 👍

[GoalSmashers]

We added it as a fix to #110 since non-base64 encoded strings should (have to?) remain quoted. Thanks for reporting 👍

[XhmikosR]

Thanks!

[wnr]

I have similar issues in 3.4.20,

The CSS:

.foo {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiB2aWV3Qm94PSIwIDAgMzAgMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE5LjEwNSAxLjkwM2w1LjMxIDUuMzFIMFY5Ljc0aDI0LjQxNWwtNS4zMSA1LjMxIDEuNzg1IDEuNzg1IDguMzYtOC4zNkwyMC44OS4xMiIgLz48L3N2Zz4=");
}

results in the following:

.foo{background-image:url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiB2aWV3Qm94PSIwIDAgMzAgMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE5LjEwNSAxLjkwM2w1LjMxIDUuMzFIMFY5Ljc0aDI0LjQxNWwtNS4zMSA1LjMxIDEuNzg1IDEuNzg1IDguMzYtOC4zNkwyMC44OS4xMiIgLz48L3N2Zz4=)}

When running the command ./node_modules/.bin/cleancss --compatability 'ie7' in.css.

So the quotes still gets removed for base64 urls.

[jakubpawlowicz]

@wnr there's a separate flag properties.urlQuotes https://github.com/jakubpawlowicz/clean-css/#how-to-set-a-compatibility-mode which is not set by default in ie7 mode. As far as I remember IE<9 does not support URI-encoded assets, or is it an issue with a different browser?

[wnr]

Sorry, I should have mentioned that I tried that flag and it did not make any difference.

I tried the following commands:

./node_modules/.bin/cleancss --compatability 'ie7,+properties.urlQuotes' in.css
./node_modules/.bin/cleancss --compatability 'ie7,-properties.urlQuotes' in.css

[XhmikosR]

There is no compatAbility option. It's compatibility.

[wnr]

Sorry about that.

I invoked the following commands now:

./node_modules/.bin/cleancss --compatibility 'ie7,-properties.urlQuotes' tmp.css
./node_modules/.bin/cleancss --compatibility 'ie7,+properties.urlQuotes' tmp.css

With the same result.

Thanks for the quick response!

[XhmikosR]

Does IE7 even support Base64 SVG? I doubt it.

[wnr]

You are probably right. However, ./node_modules/.bin/cleancss --compatibility 'ie8,+properties.urlQuotes' tmp.css and ./node_modules/.bin/cleancss --compatibility 'ie9,+properties.urlQuotes' tmp.css yields the same result.