feat: generate js sourcemaps using magic-string (#579)

package.json

@@ -74,6 +74,7 @@
     "fs-extra": "^9.0.0",
     "loader-utils": "^2.0.0",
     "lodash": "^4.17.15",
+    "magic-string": "^0.25.7",
     "memory-fs": "^0.5.0",
     "postcss-atroot": "^0.1.3",
     "postcss-loader": "^3.0.0",

src/loader.js

@@ -6,6 +6,7 @@ import chalk from 'chalk';
 import levenshtein from 'fast-levenshtein';
 import loaderUtils from 'loader-utils';
 import sortBy from 'lodash/sortBy';
+import MagicString from 'magic-string';
 
 import VirtualModulePlugin from './VirtualModulePlugin';
 import traverse from './traverse';
@@ -108,25 +109,25 @@ function collectStyles(src, filename, resolveDependency, opts) {
   }
 }
 
-function replaceStyleTemplates(src, locations) {
+function replaceStyleTemplates(filename, src, locations) {
   locations = sortBy(locations, (i) => i.start || 0);
 
-  let offset = 0;
+  const magic = new MagicString(src);
 
-  function splice(str, start = 0, end = 0, replace) {
-    const result =
-      str.slice(0, start + offset) + replace + str.slice(end + offset);
-
-    offset += replace.length - (end - start);
-    return result;
-  }
-
-  locations.forEach(({ start, end, code }) => {
+  locations.forEach(({ start = 0, end = 0, code }) => {
     if (code.endsWith(';')) code = code.slice(0, -1); // remove trailing semicolon
-    src = splice(src, start, end, code);
+
+    if (start === end) {
+      magic.appendLeft(start, code);
+    } else {
+      magic.overwrite(start, end, code);
+    }
   });
 
-  return src;
+  return {
+    code: magic.toString(),
+    map: magic.generateMap({ includeContent: true, source: filename }),
+  };
 }
 
 const LOADER_PLUGIN = Symbol('loader added VM plugin');
@@ -251,9 +252,9 @@ module.exports = function loader(content, map, meta) {
         compilation.fileTimestamps.set(style.absoluteFilePath, +mtime);
       });
 
-      const result = replaceStyleTemplates(content, changeset);
+      const result = replaceStyleTemplates(resourcePath, content, changeset);
 
-      cb(null, result);
+      cb(null, result.code, result.map);
     })
     .catch(cb);
 

yarn.lock

@@ -7258,6 +7258,13 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+magic-string@^0.25.7:
+  version "0.25.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  dependencies:
+    sourcemap-codec "^1.4.4"
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -9948,6 +9955,11 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+sourcemap-codec@^1.4.4:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
 spdx-correct@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"