feat: allow filtering urls

webpack-contrib · Dec 6, 2018 · 4b1368f · 4b1368f
1 parent 9642aa5
commit 4b1368f
Show file tree

Hide file tree

Showing 8 changed files with 383 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -114,23 +114,41 @@ module.exports = {
 
 ## Options
 
-|                    Name                     |        Type         |     Default     | Description                                 |
-| :-----------------------------------------: | :-----------------: | :-------------: | :------------------------------------------ |
-|              **[`url`](#url)**              |     `{Boolean}`     |     `true`      | Enable/Disable `url()` handling             |
-|           **[`import`](#import)**           |     `{Boolean}`     |     `true`      | Enable/Disable @import handling             |
-|          **[`modules`](#modules)**          | `{Boolean\|String}` |     `false`     | Enable/Disable CSS Modules and setup mode   |
-|   **[`localIdentName`](#localidentname)**   |     `{String}`      | `[hash:base64]` | Configure the generated ident               |
-|        **[`sourceMap`](#sourcemap)**        |     `{Boolean}`     |     `false`     | Enable/Disable Sourcemaps                   |
-|        **[`camelCase`](#camelcase)**        | `{Boolean\|String}` |     `false`     | Export Classnames in CamelCase              |
-|    **[`importLoaders`](#importloaders)**    |     `{Number}`      |       `0`       | Number of loaders applied before CSS loader |
-| **[`exportOnlyLocals`](#exportonlylocals)** |     `{Boolean}`     |     `false`     | Export only locals                          |
+|                    Name                     |         Type          |     Default     | Description                                 |
+| :-----------------------------------------: | :-------------------: | :-------------: | :------------------------------------------ |
+|              **[`url`](#url)**              | `{Boolean\|Function}` |     `true`      | Enable/Disable `url()` handling             |
+|           **[`import`](#import)**           |      `{Boolean}`      |     `true`      | Enable/Disable @import handling             |
+|          **[`modules`](#modules)**          |  `{Boolean\|String}`  |     `false`     | Enable/Disable CSS Modules and setup mode   |
+|   **[`localIdentName`](#localidentname)**   |      `{String}`       | `[hash:base64]` | Configure the generated ident               |
+|        **[`sourceMap`](#sourcemap)**        |      `{Boolean}`      |     `false`     | Enable/Disable Sourcemaps                   |
+|        **[`camelCase`](#camelcase)**        |  `{Boolean\|String}`  |     `false`     | Export Classnames in CamelCase              |
+|    **[`importLoaders`](#importloaders)**    |      `{Number}`       |       `0`       | Number of loaders applied before CSS loader |
+| **[`exportOnlyLocals`](#exportonlylocals)** |      `{Boolean}`      |     `false`     | Export only locals                          |
 
 ### `url`
 
-Type: `Boolean`
+Type: `Boolean|Function`
 Default: `true`
 
-Enable/disable `url()` resolving. Absolute `urls` are not resolving by default.
+Control `url()` resolving. Absolute `urls` are not resolving by default.
+
+Examples resolutions:
+
+```
+url(image.png) => require('./image.png')
+url(./image.png) => require('./image.png')
+```
+
+To import assets from a `node_modules` path (include `resolve.modules`) and for `alias`, prefix it with a `~`:
+
+```
+url(~module/image.png) => require('module/image.png')
+url(~aliasDirectory/image.png) => require('otherDirectory/image.png')
+```
+
+#### `Boolean`
+
+Enable/disable `url()` resolving.
 
 **webpack.config.js**
 
@@ -150,18 +168,27 @@ module.exports = {
 };
 ```
 
-Examples resolutions:
+#### `Function`
 
-```
-url(image.png) => require('./image.png')
-url(./image.png) => require('./image.png')
-```
-
-To import assets from a `node_modules` path (include `resolve.modules`) and for `alias`, prefix it with a `~`:
+Allow to filter `url()`. All filtered `url()` will not be resolved.
 
-```
-url(~module/image.png) => require('module/image.png')
-url(~aliasDirectory/image.png) => require('otherDirectory/image.png')
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        loader: 'css-loader',
+        options: {
+          url: (url, resourcePath) => {
+            // `url()` with `img.png` stay untouched
+            return url.includes('img.png');
+          },
+        },
+      },
+    ],
+  },
+};
 ```
 
 ### `import`

diff --git a/src/index.js b/src/index.js
@@ -26,6 +26,7 @@ import {
   getImportPrefix,
   placholderRegExps,
   dashesCamelCase,
+  getFilter,
 } from './utils';
 import Warning from './Warning';
 import CssSyntaxError from './CssSyntaxError';
@@ -66,9 +67,6 @@ export default function loader(content, map, meta) {
     }
   }
 
-  const resolveImport = options.import !== false;
-  const resolveUrl = options.url !== false;
-
   const plugins = [];
 
   if (options.modules) {
@@ -100,14 +98,16 @@ export default function loader(content, map, meta) {
     );
   }
 
-  if (resolveImport) {
+  if (options.import !== false) {
     plugins.push(importParser());
   }
 
-  if (resolveUrl) {
+  if (options.url !== false) {
     plugins.push(
       urlParser({
-        filter: (value) => isUrlRequest(value),
+        filter: getFilter(options.url, this.resourcePath, (value) =>
+          isUrlRequest(value)
+        ),
       })
     );
   }

diff --git a/src/options.json b/src/options.json
@@ -2,7 +2,14 @@
   "additionalProperties": false,
   "properties": {
     "url": {
-      "type": "boolean"
+      "anyOf": [
+        {
+          "type": "boolean"
+        },
+        {
+          "instanceof": "Function"
+        }
+      ]
     },
     "import": {
       "type": "boolean"

diff --git a/src/utils.js b/src/utils.js
@@ -61,4 +61,24 @@ function getLocalIdent(loaderContext, localIdentName, localName, options) {
     .replace(/^((-?[0-9])|--)/, '_$1');
 }
 
-export { getImportPrefix, getLocalIdent, placholderRegExps, dashesCamelCase };
+function getFilter(filter, resourcePath, defaultFilter = null) {
+  return (content) => {
+    if (defaultFilter && !defaultFilter(content)) {
+      return false;
+    }
+
+    if (typeof filter === 'function') {
+      return !filter(content, resourcePath);
+    }
+
+    return true;
+  };
+}
+
+export {
+  getImportPrefix,
+  getLocalIdent,
+  placholderRegExps,
+  dashesCamelCase,
+  getFilter,
+};
diff --git a/test/__snapshots__/errors.test.js.snap b/test/__snapshots__/errors.test.js.snap
@@ -4,6 +4,8 @@ exports[`validation 1`] = `
 "CSS Loader Invalid Options
 
 options.url should be boolean
+options.url should pass \\"instanceof\\" keyword validation
+options.url should match some schema in anyOf
 "
 `;