cssstyle
cssstyle copied to clipboard
update url parsing logic to match current browsers
it would be nice if url parsing worked like latest firefox/chrome.
for instance, running the following snippet in those browsers:
(() => {
var div = document.createElement('div');
div.style.backgroundImage = ' url(http://some/url/here1.png) , URL(2) ';
console.log(`backgroundImage:${div.style.backgroundImage};`);
})();
prints:
backgroundImage:url("http://some/url/here1.png"), url("2");
i've searched the code a bit, and think we can achieve this by modifying the following function: https://github.com/jsdom/cssstyle/blob/f2db1ebef45c03b51787f5b9d00a3eb843f07787/lib/parsers.js#L210-L247
we can also add some better unit tests here:
- https://github.com/jsdom/cssstyle/blob/f2db1ebef45c03b51787f5b9d00a3eb843f07787/lib/parsers.test.js#L63-L65
- https://github.com/jsdom/cssstyle/blob/f2db1ebef45c03b51787f5b9d00a3eb843f07787/lib/CSSStyleDeclaration.test.js#L377-L385
if i make the "formatted" string look like url("foo.png")
instead of the current url(foo.png)
, then I could see that breaking people's existing tests (but it would "match" modern browsers more closely). If I just allow trailing/closing whitespace, and multiple urls, then that would be "more" backwards compatible I think.
I can work on this in the next few days and submit a PR. I have quite a few ideas on how to get it to work.
Thanks!
@skratchdot thanks for the info. The spec calls for support of whitespace, single quotes, or double quotes in the URL field https://www.w3.org/TR/CSS2/syndata.html#uri.
It looks like chrome, ff, safari all return URLs in double quotes. I think if we did the work to support advanced syntax for this property it would make sense to make it match the return format also. That would be a backwards compatible API change and would have to be tagged accordingly.