Polymer: Polymer breaks data:image on stylesheet inline

[leoj3n]

Double quotes on the outside are converted single quotes and single quotes on the inside are stripped.

I'm guessing this is an issue with how Polymer inlines linked stylesheets.

Distributed vendor CSS in ../swiper/dist/css/swiper.css [quotes are correct]:

.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  left: 10px;
  right: auto;
}

Above file is linked in swiper-slider.html:

<polymer-element name="swiper-slider">
  <template attributes="next prev scrollbar pagination">
    <link href="../swiper/dist/css/swiper.css" rel="stylesheet">
    ...
  <template>
  ...
<polymer-element>

Inlined result inside the <swiper-slider> shadow dom via devtools inspector [quotes are fuxed]:

.swiper-container-rtl .swiper-button-next {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Dhttp%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%20viewBox%3D0%200%2027%2044%3E%3Cpath%20d%3DM0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z%20fill%3D%23007aff%2F%3E%3C%2Fsvg%3E');
  left: 10px;
  right: auto;
}

Is there something I'm missing on my end or is this a Polymer (version 0.5.5) bug?

[leoj3n]

More info and full code on SO: http://stackoverflow.com/questions/28944546

[leoj3n]

Inserting the style declarations directly in <style> results in the same quoting issue so this is not a problem with how polymer includes and inlines external CSS but a problem with how it treats any CSS.

[leoj3n]

Is there a workaround for this so I can move forward building my custom element?

[arthurevans]

Answered original question with a workaround on SO. However, I've verified this issue in both 0.5 and 0.8. We appear to be munging the data URL. Here's a jsbin with the same styling applied inside and outside of a Polymer element (in this case, 0.8):

http://jsbin.com/qalaqu/4/edit

The lower div should have the same background as the upper div.

[evtaranov]

up?

[arthurevans]

Verified that this is still an issue in 1.2.0. Assigning to Mr. Style @sorvell for further analysis.

[jouni]

One workaround is to replace any quotes inside the url function with url encoded characters:

Double quotes (") replaced with '%22':

background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 preserveAspectRatio=%22xMidYMid meet%22><path d=%22M7 10l5 5 5-5z%22/></svg>');

Tested to work with Polymer 1.4.0, Chrome (Desktop), Safari (Desktop and Mobile), Firefox and Edge. IE11 fails to render the SVG.

[WebTiger89]

In Polymer 2 it seems to be still a problem. I don't get this url work properly in Chrome 60:

data:image/svg+xml;charset=utf8,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/></svg>

I tried to encode it with different online encoders but it breaks always on stroke='rgba(0, 0, 0, 0.5)'.
Can someone help?

[phun-ky]

I have the same issue:

This is a working CSS rule, encoded, and with the correct ' with the attributes

url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23FFF'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M19 3H5c-1.1 0-1.99.9-1.99 2L3 19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 11h-4v4h-4v-4H6v-4h4V6h4v4h4v4z'/%3E%3C/svg%3E")

This string is from a stylesheet in a webcomponent.

This is the same string, resolved/inspected in chrome:

url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=http://www.w3.org/2000/svg width=24 height=24 fill=%23FFF%3E%3Cpath fill=none d=M0 0h24v24H0z/%3E%3Cpath d=M19 3H5c-1.1 0-1.99.9-1.99 2L3 19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 11h-4v4h-4v-4H6v-4h4V6h4v4h4v4z/%3E%3C/svg%3E')

The last string is not working. If I copy the first string into the inspector, that works. It seems that using external stylesheets results in the attributes ' is beeing dropped..

[phun-ky]

@arthurevans @sorvell any traction on this issue? The suggested workaround (using %22 for actual "-quotes) is not feasible when using cssnano/postcss

EDIT: This is an issue for chrome@60, ie@11 and firefox@55

[straker]

This is still a problem in Polymer 2 as well

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.