feat(url): add url() filter support (options.url)

Author: michael-ciniawsky

README.md

@@ -74,6 +74,7 @@ export default `
   }
 `
 ```
+
 #### `{Boolean}`
 
 To disable `url()` resolving by `css-loader` set the option to `false`
@@ -88,6 +89,44 @@ To disable `url()` resolving by `css-loader` set the option to `false`
 }
 ```
 
+#### `{String}`
+
+**webpack.config.js**
+```js
+{
+  loader: 'css-loader',
+  options: {
+    url: 'filter'
+  }
+}
+```
+
+#### `{RegExp}`
+
+**webpack.config.js**
+```js
+{
+  loader: 'css-loader',
+  options: {
+    url: /filter/
+  }
+}
+```
+
+#### `{Function}`
+
+**webpack.config.js**
+```js
+{
+  loader: 'css-loader',
+  options: {
+    url (url) {
+      return /filter/.test(url)
+    }
+  }
+}
+```
+
 ### `import`
 
 ```css

src/index.js

@@ -50,7 +50,7 @@ export default function loader(src, map, meta) {
 
   // CSS URL Plugin
   if (options.url) {
-    plugins.push(urls());
+    plugins.push(urls(options));
   }
 
   // CSS Import Plugin

src/lib/plugins/url.js

@@ -4,15 +4,15 @@ import valueParser from 'postcss-value-parser';
 // ICSS {String}
 // import { createICSSRules } from "icss-utils";
 
-const walkUrls = (parsed, callback) => {
+const walkUrls = (parsed, cb) => {
   parsed.walk((node) => {
     if (node.type === 'function' && node.value === 'url') {
       const content = node.nodes.length !== 0 && node.nodes[0].type === 'string'
         ? node.nodes[0].value
         : valueParser.stringify(node.nodes);
 
       if (content.trim().length !== 0) {
-        callback(node, content);
+        cb(node, content);
       }
 
       // do not traverse inside url
@@ -22,30 +22,32 @@ const walkUrls = (parsed, callback) => {
 };
 
 const mapUrls = (parsed, map) => {
-  walkUrls(parsed, (node, content) => {
-    node.nodes = [{ type: 'word', value: map(content) }];
+  walkUrls(parsed, (node, url) => {
+    node.nodes = [{ type: 'word', value: map(url) }];
   });
 };
 
-const filterUrls = (parsed, filter) => {
+const filterUrls = (parsed, filter, options) => {
   const result = [];
 
-  walkUrls(parsed, (node, content) => {
-    if (filter(content)) {
-      result.push(content);
+  walkUrls(parsed, (node, url) => {
+    if (filter(url, options)) {
+      return false
     }
+    
+    return result.push(url);
   });
 
   return result;
 };
 
-const walkDeclsWithUrl = (css, filter) => {
+const walkDeclsWithUrl = (css, filter, options) => {
   const result = [];
 
   css.walkDecls((decl) => {
     if (decl.value.includes('url(')) {
       const parsed = valueParser(decl.value);
-      const values = filterUrls(parsed, filter);
+      const values = filterUrls(parsed, filter, options);
 
       if (values.length) {
         result.push({
@@ -60,31 +62,62 @@ const walkDeclsWithUrl = (css, filter) => {
   return result;
 };
 
-const filterValues = value => !/^\w+:\/\//.test(value) &&
-    !value.startsWith('//') &&
-    !value.startsWith('#') &&
-    !value.startsWith('data:');
+const URL = /^\w+:\/\//;
+
+const filter = (url, options) => {
+  if (URL.test(url)) {
+    return true;
+  }
+
+  if (url.startsWith('//')) {
+    return true;
+  }
+
+  if (url.startsWith('//')) {
+    return true;
+  }
+
+  if (url.startsWith('#')) {
+    return true;
+  }
+  
+  if (url.startsWith('data:')) {
+    return true;
+  }
+    
+  if (typeof options.url === 'string') {
+    return url.includes(options.url);
+  }
+
+  if (options.url instanceof RegExp) {
+    return options.url.test(url);
+  }
+
+  if (typeof options.url === 'function') {
+    return options.url(url);
+  }
+
+  return false;
+}
 
 const flatten = arr => arr.reduce((acc, d) => [...acc, ...d], []);
 const uniq = arr => arr.reduce(
   (acc, d) => (acc.indexOf(d) === -1 ? [...acc, d] : acc),
   [],
 );
 
-module.exports = postcss.plugin('postcss-icss-url', () => (css, result) => {
-  const traversed = walkDeclsWithUrl(css, filterValues);
+module.exports = postcss.plugin('postcss-icss-url', (options) => (css, result) => {
+  const traversed = walkDeclsWithUrl(css, filter, options);
   const paths = uniq(flatten(traversed.map(item => item.values)));
 
-  // ICSS imports {String}
+  // ICSS Imports {String}
   const urls = {};
   const aliases = {};
 
   paths.forEach((path, index) => {
-    // ICSS Placeholder
+    // (I)CSS Content Placeholder
     const alias = '${' + `CSS__URL__${index}` + '}';
 
-    // console.log(alias)
-
     // ICSS {String}
     // imports[`'${path}'`] = {
     //   [alias]: "default"
@@ -100,15 +133,10 @@ module.exports = postcss.plugin('postcss-icss-url', () => (css, result) => {
 
     item.decl.value = item.parsed.toString();
   });
-
+  
+  // Add URLs to result.messages
   result.messages.push({ urls });
 
-  // result.messages.push({
-  //   type: 'dependency',
-  //   plugin: 'postcss-icss-url',
-  //   urls
-  // })
-
   // ICSS {String}
   // css.prepend(createICSSRules(imports, {}));
 });

src/options.json

@@ -2,7 +2,12 @@
   "type": "object",
   "properties": {
     "url": {
-      "type": "boolean"
+      "anyOf": [
+        { "type": "string" },
+        { "type": "boolean" },
+        { "instanceof": "RegExp" },
+        { "instanceof": "Function" }
+      ]
     },
     "import": {
       "type": "boolean"

test/fixtures/urls/filter/fixture.css

@@ -0,0 +1,4 @@
+.url {
+  background: url('./file.png');
+  background: url('./filter/file.png');
+}

test/fixtures/urls/filter/fixture.js

@@ -0,0 +1 @@
+import css from './fixture.css';

test/options/__snapshots__/url.test.js.snap

@@ -15,3 +15,54 @@ export default \`.url {
 }
 \`"
 `;
+
+exports[`Options url {Function} 1`] = `
+"// CSS Imports
+
+import CSS__URL__0 from './file.png';
+
+// CSS Exports
+// CSS Modules Exports
+
+
+// CSS
+export default \`.url {
+  background: url(\${CSS__URL__0});
+  background: url('./filter/file.png');
+}
+\`"
+`;
+
+exports[`Options url {RegExp} 1`] = `
+"// CSS Imports
+
+import CSS__URL__0 from './file.png';
+
+// CSS Exports
+// CSS Modules Exports
+
+
+// CSS
+export default \`.url {
+  background: url(\${CSS__URL__0});
+  background: url('./filter/file.png');
+}
+\`"
+`;
+
+exports[`Options url {String} 1`] = `
+"// CSS Imports
+
+import CSS__URL__0 from './file.png';
+
+// CSS Exports
+// CSS Modules Exports
+
+
+// CSS
+export default \`.url {
+  background: url(\${CSS__URL__0});
+  background: url('./filter/file.png');
+}
+\`"
+`;

test/options/url.test.js

@@ -18,5 +18,55 @@ describe('Options', () => {
 
       expect(source).toMatchSnapshot();
     });
+
+    test('{String}', async () => {
+      const config = {
+        loader: {
+          test: /\.css$/,
+          options: {
+            url: 'filter'
+          },
+        },
+      };
+
+      const stats = await webpack('urls/filter/fixture.js', config);
+      const { source } = stats.toJson().modules[1];
+
+      expect(source).toMatchSnapshot();
+    });
+
+    test('{RegExp}', async () => {
+      const config = {
+        loader: {
+          test: /\.css$/,
+          options: {
+            url: /filter/
+          },
+        },
+      };
+
+      const stats = await webpack('urls/filter/fixture.js', config);
+      const { source } = stats.toJson().modules[1];
+
+      expect(source).toMatchSnapshot();
+    });
+
+    test('{Function}', async () => {
+      const config = {
+        loader: {
+          test: /\.css$/,
+          options: {
+            url (url) {
+              return /filter/.test(url);
+            }
+          },
+        },
+      };
+
+      const stats = await webpack('urls/filter/fixture.js', config);
+      const { source } = stats.toJson().modules[1];
+
+      expect(source).toMatchSnapshot();
+    });
   });
 });