fix: parsing resource

Author: cdoublev

lib/CSSStyleDeclaration.test.js

@@ -96,8 +96,9 @@ describe('CSSStyleDeclaration', () => {
     var style = new CSSStyleDeclaration();
     style.background = 'blue url(http://www.example.com/some_img.jpg)';
     expect(style.backgroundColor).toEqual('blue');
-    expect(style.backgroundImage).toEqual('url(http://www.example.com/some_img.jpg)');
-    expect(style.background).toEqual('blue url(http://www.example.com/some_img.jpg)');
+    // Jest escape quotes but the output value is not escaped
+    expect(style.backgroundImage).toEqual('url("http://www.example.com/some_img.jpg")');
+    expect(style.background).toEqual('blue url("http://www.example.com/some_img.jpg")');
     style.border = '0 solid black';
     expect(style.borderWidth).toEqual('0px');
     expect(style.borderStyle).toEqual('solid');
@@ -209,8 +210,9 @@ describe('CSSStyleDeclaration', () => {
     var style = new CSSStyleDeclaration();
     style.background = 'rgb(0, 0, 0) url(/something/somewhere.jpg)';
     expect(style.backgroundColor).toEqual('rgb(0, 0, 0)');
-    expect(style.backgroundImage).toEqual('url(/something/somewhere.jpg)');
-    expect(style.cssText).toEqual('background: rgb(0, 0, 0) url(/something/somewhere.jpg);');
+    // Jest escape quotes but the output value is not escaped
+    expect(style.backgroundImage).toEqual('url("/something/somewhere.jpg")');
+    expect(style.cssText).toEqual('background: rgb(0, 0, 0) url("/something/somewhere.jpg");');
     style = new CSSStyleDeclaration();
     style.border = '  1px  solid   black  ';
     expect(style.border).toEqual('1px solid black');
@@ -431,11 +433,12 @@ describe('CSSStyleDeclaration', () => {
   test('url parsing works with quotes', () => {
     var style = new CSSStyleDeclaration();
     style.backgroundImage = 'url(http://some/url/here1.png)';
-    expect(style.backgroundImage).toEqual('url(http://some/url/here1.png)');
+    // Jest escape quotes but the output value is not escaped
+    expect(style.backgroundImage).toEqual('url("http://some/url/here1.png")');
     style.backgroundImage = "url('http://some/url/here2.png')";
-    expect(style.backgroundImage).toEqual('url(http://some/url/here2.png)');
+    expect(style.backgroundImage).toEqual('url("http://some/url/here2.png")');
     style.backgroundImage = 'url("http://some/url/here3.png")';
-    expect(style.backgroundImage).toEqual('url(http://some/url/here3.png)');
+    expect(style.backgroundImage).toEqual('url("http://some/url/here3.png")');
   });
 
   test('setting 0 to a padding or margin works', () => {

lib/parsers.js

@@ -64,11 +64,12 @@ const ident = `(-?([a-z]|${escape})(\\w|${escape})*|--(\\w|${escape})*)`;
 const integer = '[-+]?\\d+';
 const number = `((${integer})(\\.\\d+)?|[-+]?(\\.\\d+))(e[-+]?${integer})?`;
 const percentage = `(${number})(%)`;
+const escapeRegEx = new RegExp(`${escape}`, 'i');
 const identRegEx = new RegExp(`^${ident}$`, 'i');
 const numberRegEx = new RegExp(`^${number}$`);
 const percentageRegEx = new RegExp(`^${percentage}$`);
 const stringRegEx = /^("[^"]*"|'[^']*')$/;
-const urlRegEx = /^url\(\s*([^)]*)\s*\)$/;
+const urlRegEx = new RegExp(`^url\\(${ws}([^"'() \\t${newline}\\\\]|${escape})+${ws}\\)$`, 'i');
 const whitespaceRegEx = new RegExp(`^${whitespace}$`);
 const trailingWhitespaceRegEx = new RegExp(`.*${whitespace}$`);
 
@@ -105,6 +106,7 @@ const gradientRegEx = new RegExp(
 );
 const lengthRegEx = new RegExp(`^${length}$`, 'i');
 const numericRegEx = new RegExp(`^(${number})(%|${ident})?$`, 'i');
+const resourceRegEx = new RegExp(`^(src|url)\\(${ws}(.*)${ws}\\)$`, 'i');
 const timeRegEx = new RegExp(`^(${number})(m?s)$`, 'i');
 
 /**
@@ -582,47 +584,46 @@ exports.parseDashedIdentifier = function parseDashedIdentifier(val) {
  * TODO: <image-set()>, <cross-fade()>, <element()>.
  */
 exports.parseImage = function parseImage(val) {
-  return exports.parseUrl(val) || exports.parseGradient(val);
+  return exports.parseResource(val) || exports.parseGradient(val);
 };
 
 /**
  * https://drafts.csswg.org/css-values-4/#urls
  * https://drafts.csswg.org/cssom/#ref-for-url-value
+ *
+ * url(<url>)
+ * url(<string> <url-modifier>?)
+ * src(<string> <url-modifier>?)
+ * src(<custom-var> <url-modifier>?)
+ *
+ * TODO: handle <url-modifier> (<ident> or <fn>).
  */
-exports.parseUrl = function parseUrl(val) {
+exports.parseResource = function parseResource(val) {
   if (val === '') {
     return val;
   }
-  var res = urlRegEx.exec(val);
-  // does it match the regex?
+  const res = resourceRegEx.exec(val);
   if (res) {
-    var str = res[1];
-    // if it starts with single or double quotes, does it end with the same?
-    if ((str[0] === '"' || str[0] === "'") && str[0] !== str[str.length - 1]) {
+    let [, type, urlOrString] = res;
+    type = type.toLowerCase();
+    urlOrString = urlOrString.replace(escapeRegEx, m => m.trim());
+    if (urlOrString.replace(/"|'/g, '').trim() === '') {
       return undefined;
     }
-    if (str[0] === '"' || str[0] === "'") {
-      str = str.substr(1, str.length - 2);
-    }
-
-    var i;
-    for (i = 0; i < str.length; i++) {
-      switch (str[i]) {
-        case '(':
-        case ')':
-        case ' ':
-        case '\t':
-        case '\n':
-        case "'":
-        case '"':
-          return undefined;
-        case '\\':
-          i++;
-          break;
+    const variable = exports.parseCustomVariable(urlOrString);
+    if (variable) {
+      if (type === 'src') {
+        return `src(${variable})`;
       }
+      return undefined;
+    }
+    const string = exports.parseString(urlOrString);
+    if (string) {
+      return `${type}(${string})`;
+    }
+    if (type === 'url' && urlRegEx.test(`url(${urlOrString})`)) {
+      return `url("${urlOrString}")`;
     }
-
-    return 'url(' + str + ')';
   }
   return exports.parseCustomVariable(val);
 };