WIP: Refactor loader dependencies

src/css-loader-core/loader.js

@@ -1,26 +1,32 @@
 import fs from "fs";
 import path from "path";
 
-export default (imported, importee, projectRoot) => {
-  return new Promise((resolve, reject) => {
-    let importeeDir = path.dirname(importee),
-      absolutePath = path.resolve(
-        path.join(projectRoot, importeeDir),
-        imported
-      );
+export function resolveRelativeImport(importee, importer, projectRoot) {
+  const importerDir = path.dirname(importer);
+  let pathFromProjectRoot = path.resolve(projectRoot, importerDir, importee);
 
-    // if the path is not relative or absolute, try to resolve it in node_modules
-    if (imported[0] !== "." && imported[0] !== "/") {
-      try {
-        absolutePath = require.resolve(imported);
-      } catch (e) {
-        // noop
-      }
+  // if the path is not relative or absolute, try to resolve it in node_modules
+  if (importee[0] !== "." && importee[0] !== "/") {
+    try {
+      pathFromProjectRoot = require.resolve(importee);
+    } catch (e) {
+      // noop
     }
+  }
 
-    fs.readFile(absolutePath, "utf-8", (err, source) => {
-      if (err) reject(err);
-      else resolve(source);
+  return pathFromProjectRoot;
+}
+
+export default {
+  resolveId: (importee, importer, projectRoot) => {
+    return resolveRelativeImport(importee, importer, projectRoot)
+  },
+  resolve: (importee) => {
+    return new Promise((resolve, reject) => {
+      fs.readFile(importee, "utf-8", (err, source) => {
+        if (err) reject(err);
+        else resolve(source);
+      });
     });
-  });
+  }
 }

src/css-loader-core/parser.js

@@ -1,19 +1,18 @@
 // Copied from https://github.com/css-modules/css-modules-loader-core
-
-const importRegexp = /^:import\((.+)\)$/;
 import replaceSymbols from "icss-replace-symbols";
 import postcss from 'postcss';
-import path from "path";
+
+const importRegexp = /^:import\((.+)\)$/;
 
 export default class Parser {
-  constructor(root, plugins, pathFetcher, trace, ctx = {}) {
+  constructor(root, plugins, loader, trace, ctx = {}) {
     this.root = root;
     this.plugins = plugins;
-    this.pathFetcher = pathFetcher;
+    this.loader = loader;
     this.plugin = this.plugin.bind(this);
     this.exportTokens = {};
     this.translations = {};
-    this.trace = trace;
+    this.trace = trace || '';
 
     this.sources = ctx.sources || {};
     this.traces = ctx.traces || {};
@@ -34,10 +33,11 @@ export default class Parser {
 
   fetchAllImports(css) {
     let imports = [];
+    let trace = 0;
     css.each((node) => {
       if (node.type == "rule" && node.selector.match(importRegexp)) {
         imports.push(
-          this.fetchImport(node, css.source.input.from, imports.length)
+          this.fetchImport(node, css.source.input.from, trace++)
         );
       }
     });
@@ -72,36 +72,30 @@ export default class Parser {
 
   async fetchImport(importNode, relativeTo, depNr) {
     const file = importNode.selector.match(importRegexp)[1].replace(/^["']|["']$/g, ""),
-      depTrace = this.trace + String.fromCharCode(depNr),
-      relativeDir = path.dirname(relativeTo),
-      rootRelativePath = path.resolve(relativeDir, file),
-      fileRelativePath = path.resolve(
-        path.join(this.root, relativeDir),
-        file
-      ),
-      subParser = new Parser(this.root, this.plugins, this.pathFetcher, depTrace, {
+      depTrace = this.trace + String.fromCharCode(65 + depNr), // 65 = A, making the trace more readable
+      id = this.loader.resolveId(file, relativeTo, this.root),
+      subParser = new Parser(this.root, this.plugins, this.loader, depTrace, {
         sources: this.sources,
         traces: this.traces,
         tokensByFile: this.tokensByFile
-      }),
-      tokens = this.tokensByFile[fileRelativePath];
+      });
+    let tokens = this.tokensByFile[id];
 
     try {
-      let exports = tokens;
-      if (!exports) {
-        const content = await this.pathFetcher(file, relativeTo, this.root);
+      if (!tokens) {
+        const content = await this.loader.resolve(id);
         const { css } = await postcss(this.plugins.concat([subParser.plugin()]))
-          .process(content, { from: "/" + rootRelativePath });
-        exports = subParser.exportTokens;
+          .process(content, { from: id });
+        tokens = subParser.exportTokens;
 
-        this.sources[fileRelativePath] = css;
-        this.traces[depTrace] = fileRelativePath;
-        this.tokensByFile[fileRelativePath] = exports;
+        this.sources[id] = css;
+        this.traces[depTrace] = id;
+        this.tokensByFile[id] = tokens;
       }
 
       importNode.each((decl) => {
         if (decl.type == "decl") {
-          this.translations[decl.prop] = exports[decl.value];
+          this.translations[decl.prop] = tokens[decl.value];
         }
       });
       importNode.remove();

src/index.js

@@ -30,9 +30,7 @@ function getScopedNameGenerator(opts) {
 }
 
 function getLoader(opts) {
-  return typeof opts.Loader === "function"
-    ? opts.loader
-    : defaultLoader;
+  return opts.loader || defaultLoader;
 }
 
 function isGlobalModule(globalModules, inputFile) {