Enhance URL handling and improve value extraction logic

Author: XhmikosR

__tests__/index.spec.ts

@@ -10,6 +10,10 @@ describe('node-detective-postcss', () => {
       assert('@import "foo.css"', ['foo.css']);
     });
 
+    it('works with single quotes', () => {
+      assert("@import 'foo.css'", ['foo.css']);
+    });
+
     describe('url()', () => {
       it('works with url()', () => {
         assert('@import url("navigation.css");', ['navigation.css']);
@@ -57,6 +61,10 @@ describe('node-detective-postcss', () => {
       assert('@import url("//example.com/style.css");', []);
     });
 
+    it('ignores protocol-relative URLs without url()', () => {
+      assert('@import "//example.com/style.css"', []);
+    });
+
     it('does not touch the paths', () => {
       assert('@import "../../././bla.css"', ['../../././bla.css']);
     });
@@ -89,6 +97,10 @@ describe('node-detective-postcss', () => {
       ]);
     });
 
+    it('ignores absolute URLs', () => {
+      assert("@value primary from 'https://example.com/colors.css';", []);
+    });
+
     it('leaves simple definitions alone', () => {
       assert('@value mine: #fff;', []);
     });
@@ -135,6 +147,24 @@ describe('node-detective-postcss', () => {
       assert('@value x: url(bummer.png)', ['bummer.png'], { url: true });
     });
 
+    it('ignores absolute urls', () => {
+      assert('.x { background: url(https://example.com/img.png) }', [], {
+        url: true,
+      });
+    });
+
+    it('ignores protocol-relative urls', () => {
+      assert('.x { background: url(//example.com/img.png) }', [], {
+        url: true,
+      });
+    });
+
+    it('finds multiple url() in one declaration', () => {
+      assert('.x { background: url(a.png), url(b.png) }', ['a.png', 'b.png'], {
+        url: true,
+      });
+    });
+
     it('ignores base64 data: urls', () => {
       assert(
         '.x { background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)}',
@@ -144,8 +174,8 @@ describe('node-detective-postcss', () => {
 
     it('ignores SVG data: urls', () => {
       const css = `svg {
-                -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 32 32" width="32" height="32" xmlns="http://www.w3.org/2000/svg"><defs><mask id="mask"><rect x="0" y="0" width="32" height="32" fill="#fff"/><rect x="14" y="-10" width="40" height="20" rx="10" fill="#000"/></mask></defs><rect x="0" y="0" width="32" height="32" mask="url(#mask)"/></svg>');
-            }`;
+        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 32 32" width="32" height="32" xmlns="http://www.w3.org/2000/svg"><defs><mask id="mask"><rect x="0" y="0" width="32" height="32" fill="#fff"/><rect x="14" y="-10" width="40" height="20" rx="10" fill="#000"/></mask></defs><rect x="0" y="0" width="32" height="32" mask="url(#mask)"/></svg>');
+      }`;
       assert(css, []);
     });
   });

src/index.ts

@@ -75,13 +75,29 @@ function detective(src, options: detective.Options = { url: false }) {
 }
 
 function getValueOrUrl(node: ChildNode): string | false {
-  const ret = isUrlNode(node) ? getValue(node.nodes[0]) : getValue(node);
+  const ret = isUrlNode(node) ? getUrlContent(node) : getValue(node);
 
   // is-url-superb uses new URL() which doesn't accept protocol-relative URLs;
   // prepend http: so they get correctly identified and filtered out
   return !isUrl(ret.startsWith('//') ? `http:${ret}` : ret) && ret;
 }
 
+function getUrlContent(urlNode: Func): string {
+  const first = urlNode.nodes[0];
+
+  // Quoted: url('foo.css') or url("foo.css")
+  if (first && first.type === 'quoted') {
+    return first.contents;
+  }
+
+  // Unquoted: reconstruct the full string from all child nodes (handles
+  // absolute URLs like url(https://...) which parse as multiple tokens)
+  return urlNode.nodes
+    .filter((n) => isNodeWithValue(n))
+    .map((n) => getValue(n))
+    .join('');
+}
+
 function getValue(node: ChildNode) {
   if (!isNodeWithValue(node)) {
     throw new Error('Unexpectedly found a node without a value');