refactor: postcss plugins

Author: alexander-akait

README.md

@@ -121,7 +121,7 @@ url(image.png) => require('./image.png')
 url(./image.png) => require('./image.png')
 ```
 
-To import styles from a `node_modules` path (include `resolve.modules`) and for `alias`, prefix it with a `~`:
+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')
@@ -130,14 +130,24 @@ url(~aliasDirectory/image.png) => require('otherDirectory/image.png')
 
 ### `import`
 
-To disable `@import` resolving by `css-loader` set the option to `false`.
+Enable/disable `@import` resolving. Absolute urls are not resolving.
+
+Examples resolutions:
 
-Absolute urls are not resolving.
+```
+@import 'style.css' => require('./style.css')
+@import url(style.css) => require('./style.css')
+@import url('style.css') => require('./style.css')
+@import './style.css' => require('./style.css')
+@import url(./style.css) => require('./style.css')
+@import url('./style.css') => require('./style.css')
+```
 
-To import styles from a node module path, prefix it with a `~`:
+To import styles from a `node_modules` path (include `resolve.modules`) and for `alias`, prefix it with a `~`:
 
-```css
-@import '~module/styles.css';
+```
+@import url(~module/style.css) => require('module/style.css')
+@import url(~aliasDirectory/style.css) => require('otherDirectory/style.css')
 ```
 
 ### [`modules`](https://github.com/css-modules/css-modules)

lib/loader.js

@@ -191,7 +191,7 @@ module.exports = function loader(content, map, meta) {
             )}, ${JSON.stringify(media)}]);`;
           }
 
-          const importUrl = importUrlPrefix + url;
+          const importUrl = importUrlPrefix + urlToRequest(url);
 
           return `exports.i(require(${stringifyRequest(
             this,

lib/plugins/postcss-import-parser.js

@@ -1,6 +1,5 @@
 const postcss = require('postcss');
 const valueParser = require('postcss-value-parser');
-const loaderUtils = require('loader-utils');
 
 const pluginName = 'postcss-import-parser';
 
@@ -19,7 +18,7 @@ function getUrl(node) {
     return node.value;
   }
 
-  return '';
+  return null;
 }
 
 function parseImport(params) {
@@ -31,7 +30,7 @@ function parseImport(params) {
 
   const url = getUrl(nodes[0]);
 
-  if (url.trim().length === 0) {
+  if (!url || url.trim().length === 0) {
     return null;
   }
 
@@ -44,61 +43,66 @@ function parseImport(params) {
   };
 }
 
+function walkAtRules(css, result, filter) {
+  const items = [];
+
+  css.walkAtRules(/^import$/i, (atRule) => {
+    // Convert only top-level @import
+    if (atRule.parent.type !== 'root') {
+      return;
+    }
+
+    if (atRule.nodes) {
+      result.warn(
+        "It looks like you didn't end your @import statement correctly. " +
+          'Child nodes are attached to it.',
+        { node: atRule }
+      );
+      return;
+    }
+
+    const parsed = parseImport(atRule.params);
+
+    if (!parsed) {
+      // eslint-disable-next-line consistent-return
+      return result.warn(`Unable to find uri in '${atRule.toString()}'`, {
+        node: atRule,
+      });
+    }
+
+    if (filter && !filter(parsed)) {
+      return;
+    }
+
+    atRule.remove();
+
+    const { url, media } = parsed;
+
+    items.push({ url, media });
+  });
+
+  return items;
+}
+
+function uniq(array) {
+  return array.reduce(
+    (acc, d) =>
+      !acc.find((el) => el.url === d.url && el.media === d.media)
+        ? [...acc, d]
+        : acc,
+    []
+  );
+}
+
 module.exports = postcss.plugin(
   pluginName,
-  () =>
+  (options = {}) =>
     function process(css, result) {
-      css.walkAtRules(/^import$/i, (atRule) => {
-        // Convert only top-level @import
-        if (atRule.parent.type !== 'root') {
-          return;
-        }
-
-        if (atRule.nodes) {
-          result.warn(
-            "It looks like you didn't end your @import statement correctly. " +
-              'Child nodes are attached to it.',
-            { node: atRule }
-          );
-          return;
-        }
-
-        const parsed = parseImport(atRule.params);
-
-        if (!parsed) {
-          // eslint-disable-next-line consistent-return
-          return result.warn(`Unable to find uri in '${atRule.toString()}'`, {
-            node: atRule,
-          });
-        }
-
-        atRule.remove();
-
-        const { media } = parsed;
-        let { url } = parsed;
-        const isUrlRequest = loaderUtils.isUrlRequest(url);
-
-        if (isUrlRequest) {
-          url = loaderUtils.urlToRequest(url);
-        }
-
-        const alreadyIncluded = result.messages.find(
-          (message) =>
-            message.pluginName === pluginName &&
-            message.type === 'import' &&
-            message.item.url === url &&
-            message.item.media === media
-        );
-
-        if (alreadyIncluded) {
-          return;
-        }
-
-        result.messages.push({
-          pluginName,
-          type: 'import',
-          item: { url, media },
-        });
+      const traversed = walkAtRules(css, result, options.filter);
+      const paths = uniq(traversed);
+
+      paths.forEach((item) => {
+        result.messages.push({ pluginName, type: 'import', item });
       });
     }
 );

lib/plugins/postcss-url-parser.js

@@ -39,7 +39,7 @@ function filterUrls(parsed, result, decl, filter) {
       return;
     }
 
-    if (!filter(url)) {
+    if (filter && !filter(url)) {
       return;
     }
 
@@ -96,7 +96,7 @@ function uniq(array) {
 
 module.exports = postcss.plugin(
   pluginName,
-  (options) =>
+  (options = {}) =>
     function process(css, result) {
       const traversed = walkDeclsWithUrl(css, result, options.filter);
       const paths = uniq(flatten(traversed.map((item) => item.values)));
@@ -121,6 +121,7 @@ module.exports = postcss.plugin(
 
       traversed.forEach((item) => {
         mapUrls(item.parsed, (value) => urls[value]);
+
         // eslint-disable-next-line no-param-reassign
         item.decl.value = item.parsed.toString();
       });