fix: sourcemap (#249)

src/evaluator.js

@@ -56,14 +56,13 @@ function resolveRequests(context, possibleRequests, resolve) {
 
 async function getDependencies(
   code,
+  filepath,
   loaderContext,
   resolve,
   options,
   parcelOptions,
   seen = new Set()
 ) {
-  const filepath = loaderContext.resourcePath;
-
   seen.add(filepath);
 
   nodes.filename = filepath;
@@ -145,6 +144,7 @@ async function getDependencies(
 
           for (const [importPath, resolvedPath] of await getDependencies(
             source,
+            detected,
             loaderContext,
             resolveFilename,
             options
@@ -171,7 +171,13 @@ export default async function createEvaluator(code, options, loaderContext) {
   const possibleImports = (
     await Promise.all(
       [code, optionsImports].map((content) =>
-        getDependencies(content, loaderContext, resolveFilename, options)
+        getDependencies(
+          content,
+          loaderContext.resourcePath,
+          loaderContext,
+          resolveFilename,
+          options
+        )
       )
     )
   ).reduce((acc, map) => {

src/index.js

@@ -1,13 +1,11 @@
-import { promises as fs } from 'fs';
-
 import stylus from 'stylus';
 
 import { getOptions } from 'loader-utils';
 import validateOptions from 'schema-utils';
 
 import schema from './options.json';
 import createEvaluator from './evaluator';
-import { getStylusOptions } from './utils';
+import { getStylusOptions, readFile, normalizeSourceMap } from './utils';
 import resolver from './lib/resolver';
 
 export default async function stylusLoader(source) {
@@ -27,9 +25,9 @@ export default async function stylusLoader(source) {
 
   if (useSourceMap) {
     stylusOptions.sourcemap = {
-      content: true,
       comment: false,
       sourceRoot: this.rootContext,
+      basePath: this.rootContext,
     };
   }
 
@@ -105,21 +103,22 @@ export default async function stylusLoader(source) {
       }
     }
 
-    if (styl.sourcemap) {
-      delete styl.sourcemap.file;
-
-      // load source file contents into source map
-      if (stylusOptions.sourcemap && stylusOptions.sourcemap.content) {
-        try {
-          styl.sourcemap.sourcesContent = await Promise.all(
-            styl.sourcemap.sources.map((file) => fs.readFile(file, 'utf-8'))
-          );
-        } catch (e) {
-          return callback(e);
-        }
+    let map = styl.sourcemap;
+
+    if (map && useSourceMap) {
+      map = normalizeSourceMap(map, this.rootContext);
+
+      try {
+        map.sourcesContent = await Promise.all(
+          map.sources.map(async (file) =>
+            (await readFile(this.fs, file)).toString()
+          )
+        );
+      } catch (errorFs) {
+        return callback(errorFs);
       }
     }
 
-    return callback(null, css, styl.sourcemap);
+    return callback(null, css, map);
   });
 }

src/utils.js

@@ -1,3 +1,5 @@
+import path from 'path';
+
 import { klona } from 'klona/full';
 
 function getStylusOptions(loaderContext, loaderOptions) {
@@ -30,9 +32,9 @@ function getStylusOptions(loaderContext, loaderOptions) {
   return stylusOptions;
 }
 
-function readFile(inputFileSystem, path) {
+function readFile(inputFileSystem, filepath) {
   return new Promise((resolve, reject) => {
-    inputFileSystem.readFile(path, (err, stats) => {
+    inputFileSystem.readFile(filepath, (err, stats) => {
       if (err) {
         reject(err);
       }
@@ -41,4 +43,49 @@ function readFile(inputFileSystem, path) {
   });
 }
 
-export { getStylusOptions, readFile };
+const IS_NATIVE_WIN32_PATH = /^[a-z]:[/\\]|^\\\\/i;
+const ABSOLUTE_SCHEME = /^[A-Za-z0-9+\-.]+:/;
+
+function getURLType(source) {
+  if (source[0] === '/') {
+    if (source[1] === '/') {
+      return 'scheme-relative';
+    }
+
+    return 'path-absolute';
+  }
+
+  if (IS_NATIVE_WIN32_PATH.test(source)) {
+    return 'path-absolute';
+  }
+
+  return ABSOLUTE_SCHEME.test(source) ? 'absolute' : 'path-relative';
+}
+
+function normalizeSourceMap(map, rootContext) {
+  const newMap = map;
+
+  // result.map.file is an optional property that provides the output filename.
+  // Since we don't know the final filename in the webpack build chain yet, it makes no sense to have it.
+  // eslint-disable-next-line no-param-reassign
+  delete newMap.file;
+
+  // eslint-disable-next-line no-param-reassign
+  newMap.sourceRoot = '';
+
+  // eslint-disable-next-line no-param-reassign
+  newMap.sources = newMap.sources.map((source) => {
+    const sourceType = getURLType(source);
+
+    // Do no touch `scheme-relative`, `path-absolute` and `absolute` types
+    if (sourceType === 'path-relative') {
+      return path.resolve(rootContext, path.normalize(source));
+    }
+
+    return source;
+  });
+
+  return newMap;
+}
+
+export { getStylusOptions, readFile, normalizeSourceMap };