Single quotes and double quotes are removed from CSS url parameter breaking some data:image/... definitions

[jpradelle]

Description

Single quotes and double quotes are removed from CSS url parameter, breaking some url definitions such as

.foo {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='4'/></svg>");
}

Live Demo

https://jsfiddle.net/jpradell/kmygf23c/6/

Steps to Reproduce

Create a polymer element with style in it and url including single or double quote, such as

class MyElement extends PolymerElement {
  static get template() {
    return html`
      <style>
        .issue {
          background-color: red;
          background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='4'/></svg>");
          width: 10px;
          height: 10px;
        }
      </style>
      Example: 
      <div class="issue"></div>
    `;
  }
}

Expected Results

CSS property with url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='4'/></svg>");

Actual Results

CSS property with url(data:image/svg+xml;utf8,<svg xmlns=http://www.w3.org/2000/svg width=10 height=10><circle cx=5 cy=5 r=4/></svg>);

Polymer Code Causing the issue

In Polymer source https://github.com/Polymer/polymer/blob/master/lib/utils/resolve-url.js#L81

export function resolveCss(cssText, baseURI) {
  return cssText.replace(CSS_URL_RX, function(m, pre, url, post) {
    return pre + '\'' +
      resolveUrl(url.replace(/["']/g, ''), baseURI) +
      '\'' + post;
  });
}

All single quotes and double quotes are removed.

Browsers Affected

• [X] Chrome
• [ ] Firefox
• [ ] Edge
• [ ] Safari 11
• [ ] Safari 10
• [ ] IE 11

Versions

• Polymer: v3.4.1
• webcomponents: v2.6.0

[rachitsharma615]

Hey, I wanted to work on this issue. Could you please assign this to me?

[robrez]

This is causing me trouble, I can't figure out any great workarounds except manual dom manipulation. Any advise?

Edit my workaround was to override:

  protected static _processStyleText(cssText: string, _baseURI: string): string {
    // note - could alternatively incorporate the fix from #5693 
    return cssText;
  }