fix: resolution algorithm for CSS modules

README.md

@@ -415,6 +415,8 @@ exports.locals = {
 
 To import a local classname from another module.
 
+> i We strongly recommend that you specify the extension when importing a file, since it is possible to import a file with any extension and it is not known in advance which file to use.
+
 ```css
 :local(.continueButton) {
   composes: button from 'library/button.css';

src/index.js

@@ -43,8 +43,19 @@ export default function loader(content, map, meta) {
   const preRequester = getPreRequester(this);
   const urlHandler = (url) =>
     stringifyRequest(this, preRequester(options.importLoaders) + url);
+  const icssResolver = this.getResolve({
+    mainFields: ['css', 'style', 'main', '...'],
+    mainFiles: ['index', '...'],
+  });
 
-  plugins.push(icssParser({ urlHandler }));
+  plugins.push(
+    icssParser({
+      context: this.context,
+      rootContext: this.rootContext,
+      resolver: icssResolver,
+      urlHandler,
+    })
+  );
 
   if (options.import !== false && exportType === 'full') {
     const resolver = this.getResolve({
@@ -136,8 +147,6 @@ export default function loader(content, map, meta) {
         }
       }
 
-      apiImports.sort((a, b) => a.index - b.index);
-
       /*
        *   Order
        *   CSS_LOADER_ICSS_IMPORT: [],
@@ -153,6 +162,12 @@ export default function loader(content, map, meta) {
           (b.index < a.index) - (a.index < b.index)
         );
       });
+      apiImports.sort((a, b) => {
+        return (
+          (b.order < a.order) - (a.order < b.order) ||
+          (b.index < a.index) - (a.index < b.index)
+        );
+      });
 
       const { localsConvention } = options;
       const esModule =

src/plugins/postcss-icss-parser.js

@@ -1,8 +1,9 @@
 import postcss from 'postcss';
 import { extractICSS, replaceValueSymbols, replaceSymbols } from 'icss-utils';
-import { urlToRequest } from 'loader-utils';
 
-function makeRequestableIcssImports(icssImports) {
+import { normalizeUrl, resolveRequests, isUrlRequestable } from '../utils';
+
+function makeRequestableIcssImports(icssImports, rootContext) {
   return Object.keys(icssImports).reduce((accumulator, url) => {
     const tokensMap = icssImports[url];
     const tokens = Object.keys(tokensMap);
@@ -11,16 +12,27 @@ function makeRequestableIcssImports(icssImports) {
       return accumulator;
     }
 
-    const normalizedUrl = urlToRequest(url);
+    const isRequestable = isUrlRequestable(url);
+
+    let normalizedUrl;
+
+    if (isRequestable) {
+      normalizedUrl = normalizeUrl(url, true, rootContext);
+    }
 
-    if (!accumulator[normalizedUrl]) {
+    const key = typeof normalizedUrl !== 'undefined' ? normalizedUrl : url;
+
+    if (!accumulator[key]) {
       // eslint-disable-next-line no-param-reassign
-      accumulator[normalizedUrl] = tokensMap;
+      accumulator[key] = { url, tokenMap: tokensMap };
     } else {
       // eslint-disable-next-line no-param-reassign
-      accumulator[normalizedUrl] = {
-        ...accumulator[normalizedUrl],
-        ...tokensMap,
+      accumulator[key] = {
+        url,
+        tokenMap: {
+          ...accumulator[key].tokenMap,
+          ...tokensMap,
+        },
       };
     }
 
@@ -31,55 +43,104 @@ function makeRequestableIcssImports(icssImports) {
 export default postcss.plugin(
   'postcss-icss-parser',
   (options) => (css, result) => {
-    const importReplacements = Object.create(null);
-    const extractedICSS = extractICSS(css);
-    const icssImports = makeRequestableIcssImports(extractedICSS.icssImports);
-
-    for (const [importIndex, url] of Object.keys(icssImports).entries()) {
-      const importName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}___`;
-
-      result.messages.push(
-        {
-          type: 'import',
-          value: {
-            // 'CSS_LOADER_ICSS_IMPORT'
-            order: 0,
-            importName,
-            url: options.urlHandler ? options.urlHandler(url) : url,
-          },
-        },
-        {
-          type: 'api-import',
-          value: { type: 'internal', importName, dedupe: true },
-        }
+    return new Promise(async (resolve, reject) => {
+      const importReplacements = Object.create(null);
+      const extractedICSS = extractICSS(css);
+      const icssImports = makeRequestableIcssImports(
+        extractedICSS.icssImports,
+        options.rootContext
       );
 
-      const tokenMap = icssImports[url];
-      const tokens = Object.keys(tokenMap);
-
-      for (const [replacementIndex, token] of tokens.entries()) {
-        const replacementName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}_REPLACEMENT_${replacementIndex}___`;
-        const localName = tokenMap[token];
+      const tasks = [];
+
+      let index = 0;
+
+      for (const [importIndex, normalizedUrl] of Object.keys(
+        icssImports
+      ).entries()) {
+        const { url } = icssImports[normalizedUrl];
+
+        index += 1;
+
+        tasks.push(
+          Promise.resolve(index).then(async (currentIndex) => {
+            const importName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}___`;
+            const { resolver, context } = options;
+
+            let resolvedUrl;
+
+            try {
+              resolvedUrl = await resolveRequests(resolver, context, [
+                ...new Set([normalizedUrl, url]),
+              ]);
+            } catch (error) {
+              throw error;
+            }
+
+            result.messages.push(
+              {
+                type: 'import',
+                value: {
+                  // 'CSS_LOADER_ICSS_IMPORT'
+                  order: 0,
+                  importName,
+                  url: options.urlHandler(resolvedUrl),
+                  index: currentIndex,
+                },
+              },
+              {
+                type: 'api-import',
+                value: {
+                  // 'CSS_LOADER_ICSS_IMPORT'
+                  order: 0,
+                  type: 'internal',
+                  importName,
+                  dedupe: true,
+                  index: currentIndex,
+                },
+              }
+            );
+
+            const { tokenMap } = icssImports[normalizedUrl];
+            const tokens = Object.keys(tokenMap);
+
+            for (const [replacementIndex, token] of tokens.entries()) {
+              const replacementName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}_REPLACEMENT_${replacementIndex}___`;
+              const localName = tokenMap[token];
+
+              importReplacements[token] = replacementName;
+
+              result.messages.push({
+                type: 'icss-replacement',
+                value: { replacementName, importName, localName },
+              });
+            }
+          })
+        );
+      }
 
-        importReplacements[token] = replacementName;
+      try {
+        await Promise.all(tasks);
+      } catch (error) {
+        reject(error);
+      }
 
-        result.messages.push({
-          type: 'icss-replacement',
-          value: { replacementName, importName, localName },
-        });
+      if (Object.keys(importReplacements).length > 0) {
+        replaceSymbols(css, importReplacements);
       }
-    }
 
-    if (Object.keys(importReplacements).length > 0) {
-      replaceSymbols(css, importReplacements);
-    }
+      const { icssExports } = extractedICSS;
 
-    const { icssExports } = extractedICSS;
+      for (const name of Object.keys(icssExports)) {
+        const value = replaceValueSymbols(
+          icssExports[name],
+          importReplacements
+        );
 
-    for (const name of Object.keys(icssExports)) {
-      const value = replaceValueSymbols(icssExports[name], importReplacements);
+        result.messages.push({ type: 'export', value: { name, value } });
+      }
 
-      result.messages.push({ type: 'export', value: { name, value } });
-    }
+      resolve();
+    });
   }
 );

src/plugins/postcss-import-parser.js

@@ -137,9 +137,7 @@ export default postcss.plugin(pluginName, (options) => (css, result) => {
                   // 'CSS_LOADER_AT_RULE_IMPORT'
                   order: 1,
                   importName,
-                  url: options.urlHandler
-                    ? options.urlHandler(resolvedUrl)
-                    : resolvedUrl,
+                  url: options.urlHandler(resolvedUrl),
                   index: currentIndex,
                 },
               });
@@ -148,6 +146,8 @@ export default postcss.plugin(pluginName, (options) => (css, result) => {
             result.messages.push({
               type: 'api-import',
               value: {
+                // 'CSS_LOADER_AT_RULE_IMPORT'
+                order: 1,
                 type: 'internal',
                 importName,
                 media,
@@ -161,7 +161,14 @@ export default postcss.plugin(pluginName, (options) => (css, result) => {
           result.messages.push({
             pluginName,
             type: 'api-import',
-            value: { type: 'external', url, media, index: currentIndex },
+            value: {
+              // 'CSS_LOADER_AT_RULE_IMPORT'
+              order: 1,
+              type: 'external',
+              url,
+              media,
+              index: currentIndex,
+            },
           });
         })
       );

test/__snapshots__/import-option.test.js.snap

@@ -1,5 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`"import" option should emit warning when unresolved import: errors 1`] = `
+Array [
+  "ModuleBuildError: Module build failed (from \`replaced original path\`):
+Error: Can't resolve 'unresolved-file.css' in '/test/fixtures/import'",
+]
+`;
+
+exports[`"import" option should emit warning when unresolved import: warnings 1`] = `Array []`;
+
 exports[`"import" option should keep original order: errors 1`] = `Array []`;
 
 exports[`"import" option should keep original order: module 1`] = `