feat(import): add @import filter support (options.import)

Author: michael-ciniawsky

README.md

@@ -118,6 +118,44 @@ To disable `@import` resolving by `css-loader` set the option to `false`
 }
 ```
 
+#### `{String}`
+
+**webpack.config.js**
+```js
+{
+  loader: 'css-loader',
+  options: {
+    import: 'filter'
+  }
+}
+```
+
+#### `{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

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

src/lib/plugins/import.js

@@ -40,18 +40,43 @@ 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 (typeof options.import === 'string') {
+    return url.includes(options.import);
+  }
+
+  if (options.import instanceof RegExp) {
+    return options.import.test(url);
+  }
 
-const walkImports = (css, callback) => {
+  if (typeof options.import === 'function') {
+    return options.import(url);
+  }
+
+  return false;
+}
+
+const walkImports = (css, cb) => {
   css.each((node) => {
     if (node.type === 'atrule' && node.name.toLowerCase() === 'import') {
-      callback(node);
+      cb(node);
     }
   });
 };
 
-export default postcss.plugin(plugin, () => (css, result) => {
+export default postcss.plugin(plugin, (options) => (css, result) => {
   let idx = 0;
+
   const imports = {};
 
   walkImports(css, (atrule) => {
@@ -65,12 +90,12 @@ 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,
       });
     }
 
-    if (!isExternalUrl(parsed.url)) {
+    if (!filter(parsed.url, options)) {
       atrule.remove();
 
       imports[`CSS__IMPORT__${idx}`] = `${parsed.url}`;
@@ -87,12 +112,6 @@ export default postcss.plugin(plugin, () => (css, result) => {
 
   result.messages.push({ imports });
 
-  // result.messages.push({
-  //   type: 'dependency',
-  //   plugin: 'postcss-icss-import',
-  //   imports
-  // })
-
   // ICSS {String}
   // css.prepend(createICSSRules(imports, {}));
 });

src/options.json

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

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

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

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

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

test/fixtures/import/fixture.js

@@ -15,3 +15,57 @@ export default \`.fixture {
 }
 \`"
 `;
+
+exports[`Options import {Function} 1`] = `
+"// CSS Imports
+import CSS__IMPORT__0 from './import.css';
+
+
+// CSS Exports
+// CSS Modules Exports
+
+
+// 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 Exports
+// CSS Modules Exports
+
+
+// CSS
+export default \`@import './filter/import.css';
+
+.css {
+  width: 100%;
+}
+\`"
+`;
+
+exports[`Options import {String} 1`] = `
+"// CSS Imports
+import CSS__IMPORT__0 from './import.css';
+
+
+// CSS Exports
+// CSS Modules Exports
+
+
+// CSS
+export default \`@import './filter/import.css';
+
+.css {
+  width: 100%;
+}
+\`"
+`;

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

@@ -13,7 +13,57 @@ 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('{String}', 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('{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();