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}`

package.json

@@ -32,7 +32,6 @@
     "defaults": "webpack-defaults"
   },
   "dependencies": {
-    "cssnano": "^4.0.0-rc.2",
     "loader-utils": "^1.1.0",
     "postcss": "^6.0.15",
     "postcss-value-parser": "^3.3.0",

src/index.js

@@ -13,7 +13,6 @@ import postcss from 'postcss';
 // replace with postcss-icss-{url, import}
 import urls from './plugins/url';
 import imports from './plugins/import';
-import minifier from 'cssnano';
 
 // import runtime from './runtime';
 import SyntaxError from './Error';
@@ -22,20 +21,19 @@ import SyntaxError from './Error';
 const DEFAULTS = {
   url: true,
   import: true,
-  minimize: false,
   sourceMap: false,
 };
 
 export default function loader(css, map, meta) {
+  // Loader Mode (Async)
+  const cb = this.async();
+  const file = this.resourcePath;
+  
   // Loader Options
   const options = Object.assign({}, DEFAULTS, getOptions(this));
 
   validateOptions(schema, options, 'CSS Loader');
 
-  // Loader Mode (Async)
-  const cb = this.async();
-  const file = this.resourcePath;
-
   if (options.sourceMap) {
     if (map && typeof map !== 'string') {
       map = JSON.stringify(map);
@@ -53,12 +51,7 @@ export default function loader(css, map, meta) {
 
   // Import Plugin
   if (options.import) {
-    plugins.push(imports());
-  }
-
-  // Minifier
-  if (options.minimize) {
-    plugins.push(minifier());
+    plugins.push(imports(options));
   }
 
   if (meta) {
@@ -85,13 +78,13 @@ export default function loader(css, map, meta) {
       map,
       to: file,
     })
-    .then(({ css, map, messages }) => {
+    .then(({ root, css, map, messages }) => {
       if (meta && meta.messages) {
         messages = messages.concat(meta.messages);
       }
 
       // CSS Imports
-      const imports = messages
+      let imports = messages
         .filter((msg) => (msg.type === 'import' ? msg : false))
         .reduce((imports, msg) => {
           try {
@@ -108,7 +101,7 @@ export default function loader(css, map, meta) {
         }, '');
 
       // CSS Exports
-      const exports = messages
+      let exports = messages
         .filter((msg) => (msg.type === 'export' ? msg : false))
         .reduce((exports, msg) => {
           try {
@@ -123,17 +116,21 @@ export default function loader(css, map, meta) {
 
           return exports;
         }, '');
+      
+      imports = imports ? `// CSS Imports\n${imports}\n` : false
+      exports = exports ? `// CSS Exports\n${exports}\n` : false
+      css = `// CSS\nexport default \`${css}\``
 
       // TODO(michael-ciniawsky)
       // triage if and add CSS runtime back
       const result = [
-        imports ? `// CSS Imports\n${imports}\n` : false,
-        exports ? `// CSS Exports\n${exports}\n` : false,
-        `// CSS\nexport default \`${css}\``,
+        imports,
+        exports,
+        css
       ]
         .filter(Boolean)
         .join('\n');
-
+      
       cb(null, result, map ? map.toJSON() : null);
 
       return null;

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/Errors.test.js

@@ -23,8 +23,21 @@ describe('Errors', () => {
     expect(err).toThrowErrorMatchingSnapshot();
   });
 
-  test('Validation Error', () => {
-    const err = () => loader.call({ query: { sourceMap: 1 } });
+  test('Validation Error', async () => {
+    const config = {
+      loader: {
+        test: /\.css$/,
+        options: { 
+          sourceMap: 1 
+        },
+      },
+    };
+
+    const stats = await webpack('error.js', config);
+    const { source } = stats.toJson().modules[1];
+
+    // eslint-disable-next-line
+    const err = () => eval(source);
 
     expect(err).toThrow();
     expect(err).toThrowErrorMatchingSnapshot();

test/__snapshots__/Errors.test.js.snap

@@ -13,7 +13,7 @@ exports[`Errors Loader Error 1`] = `
 `;
 
 exports[`Errors Validation Error 1`] = `
-"CSS Loader Invalid Options
+"Module build failed: ValidationError: CSS Loader Invalid Options
 
 options.sourceMap should be 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

@@ -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();