perf(sourcemap): switch to source-map-js

src/index.ts

@@ -198,7 +198,7 @@ export default (options: Options = {}): Plugin => {
         return {
           name: fileName,
           css: res.css,
-          map: mm(res.map)
+          map: mm(res.map.toString())
             .relative(path.dirname(path.resolve(dir, fileName)))
             .toString(),
         };

src/loaders/postcss/index.ts

@@ -1,6 +1,6 @@
 import path from "path";
 import fs from "fs-extra";
-import { RawSourceMap } from "source-map";
+import { RawSourceMap } from "source-map-js";
 import { makeLegalIdentifier } from "@rollup/pluginutils";
 import postcss, { AcceptedPlugin, ProcessOptions } from "postcss";
 import cssnano from "cssnano";
@@ -106,17 +106,15 @@ const loader: Loader<PostCSSLoaderOptions> = {
           break;
 
         case "dependency":
-          this.deps.add(normalizePath(msg.file));
+          this.deps.add(normalizePath(msg.file as string));
           break;
 
         case "asset":
-          this.assets.set(msg.to, msg.source);
+          this.assets.set(msg.to as string, msg.source as Uint8Array);
           break;
       }
 
-    map = mm((res.map?.toJSON() as unknown) as RawSourceMap)
-      .resolve(path.dirname(postcssOpts.to))
-      .toString();
+    map = mm(res.map?.toJSON()).resolve(path.dirname(postcssOpts.to)).toString();
 
     if (!options.extract && this.sourceMap) {
       const m = mm(map)

src/loaders/postcss/modules/generate.ts

@@ -6,20 +6,17 @@ import hasher from "../../../utils/hasher";
 
 import { hashRe } from "../common";
 
-export default (placeholder = "[name]_[local]__[hash:8]") => (
-  local: string,
-  file: string,
-  css: string,
-): string => {
-  const { dir, name, base } = path.parse(file);
-  const hash = hasher(`${base}:${css}`);
-  const match = hashRe.exec(placeholder);
-  const hashLen = match && Number.parseInt(match[1]);
-  return makeLegalIdentifier(
-    placeholder
-      .replace("[dir]", path.basename(dir))
-      .replace("[name]", name)
-      .replace("[local]", local)
-      .replace(hashRe, hashLen ? hash.slice(0, hashLen) : hash),
-  );
-};
+export default (placeholder = "[name]_[local]__[hash:8]") =>
+  (local: string, file: string, css: string): string => {
+    const { dir, name, base } = path.parse(file);
+    const hash = hasher(`${base}:${css}`);
+    const match = hashRe.exec(placeholder);
+    const hashLen = match && Number.parseInt(match[1]);
+    return makeLegalIdentifier(
+      placeholder
+        .replace("[dir]", path.basename(dir))
+        .replace("[name]", name)
+        .replace("[local]", local)
+        .replace(hashRe, hashLen ? hash.slice(0, hashLen) : hash),
+    );
+  };

src/loaders/postcss/url/index.ts

@@ -76,7 +76,7 @@ const plugin: PluginCreator<UrlOptions> = (options = {}) => {
       if (!css.source?.input.file) return;
 
       const { file } = css.source.input;
-      const map = await mm(css.source.input.map?.text).resolve(path.dirname(file)).toConsumer();
+      const map = mm(css.source.input.map?.text).resolve(path.dirname(file)).toConsumer();
 
       const urlList: {
         node: Node;
@@ -140,7 +140,6 @@ const plugin: PluginCreator<UrlOptions> = (options = {}) => {
         });
       });
 
-      map?.destroy();
       const usedNames = new Map<string, string>();
 
       for await (const { node, url, decl, parsed, basedirs } of urlList) {

src/loaders/stylus.ts

@@ -4,6 +4,7 @@ import { mm } from "../utils/sourcemap";
 import loadModule from "../utils/load-module";
 import { normalizePath } from "../utils/path";
 import { Loader } from "./types";
+import { RawSourceMap } from "source-map-js";
 
 /** Options for Stylus loader */
 export interface StylusLoaderOptions extends Record<string, unknown>, stylus.PublicOptions {}
@@ -44,13 +45,13 @@ const loader: Loader<StylusLoaderOptions> = {
         style.sourcemap.sources.map(async source => {
           const file = normalizePath(basePath, source);
           const exists = await fs.pathExists(file);
-          if (!exists) return (null as unknown) as string;
+          if (!exists) return null as unknown as string;
           return fs.readFile(file, "utf8");
         }),
       );
     }
 
-    map = mm(style.sourcemap).toString() ?? map;
+    map = mm(style.sourcemap as unknown as RawSourceMap).toString() ?? map;
 
     return { code, map };
   },

src/loaders/types.ts

@@ -1,5 +1,5 @@
-import rollup from "rollup";
-import { RawSourceMap } from "source-map";
+import * as rollup from "rollup";
+import { RawSourceMap } from "source-map-js";
 
 /**
  * Loader

src/utils/concat.ts

@@ -1,10 +1,10 @@
-import { SourceMapGenerator, RawSourceMap } from "source-map";
+import { SourceMapGenerator } from "source-map-js";
 import { Extracted } from "../loaders/types";
 import { mm } from "./sourcemap";
 
 interface Concatenated {
   css: string;
-  map: RawSourceMap;
+  map: SourceMapGenerator;
 }
 
 export default async function (extracted: Extracted[]): Promise<Concatenated> {
@@ -14,8 +14,12 @@ export default async function (extracted: Extracted[]): Promise<Concatenated> {
 
   for await (const { css, map } of extracted) {
     content.push(css);
+    const _map = mm(map);
 
-    const consumer = await mm(map).toConsumer();
+    const data = _map.toObject();
+    if (!data) continue;
+
+    const consumer = _map.toConsumer();
     if (!consumer) continue;
 
     consumer.eachMapping(m =>
@@ -27,18 +31,18 @@ export default async function (extracted: Extracted[]): Promise<Concatenated> {
       }),
     );
 
-    if (consumer.sourcesContent) {
-      for (let i = 0; i < consumer.sources.length; i++) {
-        sm.setSourceContent(consumer.sources[i], consumer.sourcesContent[i]);
+    if (data.sourcesContent) {
+      for (const source of data.sources) {
+        const content = consumer.sourceContentFor(source, true);
+        sm.setSourceContent(source, content);
       }
     }
 
-    consumer.destroy();
     offset += css.split("\n").length;
   }
 
   return {
     css: content.join("\n"),
-    map: sm.toJSON(),
+    map: sm,
   };
 }

src/utils/sourcemap.ts

@@ -1,6 +1,6 @@
 import path from "path";
 import fs from "fs-extra";
-import { RawSourceMap, SourceMapConsumer, BasicSourceMapConsumer } from "source-map";
+import { RawSourceMap, SourceMapConsumer } from "source-map-js";
 import { dataURIRe } from "../loaders/postcss/common";
 import { isAbsolutePath, relativePath, resolvePath, normalizePath } from "./path";
 
@@ -73,7 +73,7 @@ class MapModifier {
     return JSON.stringify(this.map);
   }
 
-  async toConsumer(): Promise<BasicSourceMapConsumer | undefined> {
+  toConsumer(): SourceMapConsumer | undefined {
     if (!this.map) return this.map;
     return new SourceMapConsumer(this.map);
   }