feat(plugins/import): add @import filter support (options.import) (#656)

Author: michael-ciniawsky

README.md

@@ -103,6 +103,7 @@ To disable `url()` resolving by `css-loader` set the option to `false`
 
 #### `{Function}`
 
+
 **webpack.config.js**
 ```js
 {
@@ -145,6 +146,32 @@ To disable `@import` resolving by `css-loader` set the option to `false`
 }
 ```
 
+#### `{RegExp}`
+
+**webpack.config.js**
+```js
+{
+  loader: 'css-loader',
+  options: {
+    import: /filter/
+  }
+}
+```
+
+#### `{Function}`
+
+**webpack.config.js**
+```js
+{
+  loader: 'css-loader',
+  options: {
+    import (url) {
+      return /filter/.test(url)
+    }
+  }
+}
+```
+
 ### `minimize`
 
 #### `{Boolean}`

src/index.js

@@ -53,7 +53,7 @@ export default function loader(css, map, meta) {
 
   // Import Plugin
   if (options.import) {
-    plugins.push(imports());
+    plugins.push(imports(options));
   }
 
   // Minifier

src/options.json

@@ -10,7 +10,12 @@
       ]
     },
     "import": {
-      "type": "boolean"
+      "anyOf": [
+        { "type": "string" },
+        { "type": "boolean" },
+        { "instanceof": "RegExp" },
+        { "instanceof": "Function" }
+      ]
     },
     "minimize": {
       "type": "boolean"

src/plugins/import.js

@@ -1,8 +1,8 @@
 /* eslint-disable */
 import postcss from 'postcss';
 import valueParser from 'postcss-value-parser';
-// ICSS {String}
-// import { createICSSRules } from "icss-utils";
+
+const plugin = 'postcss-icss-import';
 
 const getArg = nodes =>
   (nodes.length !== 0 && nodes[0].type === 'string'
@@ -38,19 +38,39 @@ const parseImport = (params) => {
   };
 };
 
-const isExternalUrl = url => /^\w+:\/\//.test(url) || url.startsWith('//');
+const URL = /^\w+:\/\//;
+
+const filter = (url, options) => {
+  if (URL.test(url)) {
+    return true;
+  } 
+  
+  if (url.startsWith('//')) {
+    return true;
+  }
+
+  if (options.import instanceof RegExp) {
+    return options.import.test(url);
+  }
+
+  if (typeof options.import === 'function') {
+    return options.import(url);
+  }
 
-const walkImports = (css, callback) => {
+  return false;
+}
+
+const walkImports = (css, cb) => {
   css.each((node) => {
     if (node.type === 'atrule' && node.name.toLowerCase() === 'import') {
-      callback(node);
+      cb(node);
     }
   });
 };
 
-const plugin = 'postcss-icss-import';
+export default postcss.plugin(plugin, (options) => (css, result) => {
+  let idx = 0;
 
-export default postcss.plugin(plugin, () => (css, result) => {
   walkImports(css, (atrule) => {
     if (atrule.nodes) {
       return result.warn(
@@ -62,15 +82,15 @@ export default postcss.plugin(plugin, () => (css, result) => {
     const parsed = parseImport(atrule.params);
 
     if (parsed === null) {
-      return result.warn(`Unable to find uri in '${atrule.toString()}'`, {
+      return result.warn(`Unable to find URI in '${atrule.toString()}'`, {
         node: atrule,
       });
     }
 
     let idx = 0;
     const url = parsed.url;
 
-    if (!isExternalUrl(url)) {
+    if (!filter(url, options)) {
       atrule.remove();
 
       result.messages.push({
@@ -82,4 +102,4 @@ export default postcss.plugin(plugin, () => (css, result) => {
       idx++;
     }
   });
-});
+});

test/fixtures/import/filter/fixture.css

@@ -0,0 +1,6 @@
+@import './import.css';
+@import './filter/import.css';
+
+.css {
+  width: 100%;
+}

test/fixtures/imports/fixture.js renamed to test/fixtures/import/filter/fixture.js

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

test/fixtures/imports/fixture.css renamed to test/fixtures/import/fixture.css

@@ -11,3 +11,31 @@ export default \`.fixture {
 }
 \`"
 `;
+
+exports[`Options import {Function} 1`] = `
+"// CSS Imports
+import CSS__IMPORT__0 from './import.css';
+
+
+// CSS
+export default \`@import './filter/import.css';
+
+.css {
+  width: 100%;
+}
+\`"
+`;
+
+exports[`Options import {RegExp} 1`] = `
+"// CSS Imports
+import CSS__IMPORT__0 from './import.css';
+
+
+// CSS
+export default \`@import './filter/import.css';
+
+.css {
+  width: 100%;
+}
+\`"
+`;

test/fixtures/import/fixture.js

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

test/fixtures/imports/import.css renamed to test/fixtures/import/import.css

@@ -1,7 +1,7 @@
 /* eslint-disable
-  prefer-destructuring,
   no-param-reassign,
   no-underscore-dangle,
+  prefer-destructuring,
 */
 import path from 'path';
 import webpack from '../helpers/compiler';