Fix handling of relative sourcemap paths

Author: rtsao

.gitignore

@@ -1,5 +1,5 @@
 node_modules/
 worker/worker.js
 worker/mappings.wasm
-fixtures/app/static
+fixtures/app/public
 yarn-error.log

core/index.js

@@ -154,16 +154,18 @@ async function getMapper(filename) {
     .then(
       task(src => {
         const url = SourceMapUrl.getFrom(src);
-        return url ? getMapperFromUrl(url) : getIdentityMapper(filename, src);
+        return url
+          ? getMapperFromUrl(url, filename)
+          : getIdentityMapper(filename, src);
       }),
     );
 
   state.mapperCache.set(filename, result);
   return result;
 }
 
-function getMapperFromUrl(url) {
-  return getSourceMapJsonFromUrl(url).then(
+function getMapperFromUrl(url, filename) {
+  return getSourceMapJsonFromUrl(url, filename).then(
     task(map => {
       return new SourceMapConsumer(map);
     }),
@@ -182,14 +184,16 @@ function getLocation(stackInfo, stackIndex) {
   };
 }
 
-async function getSourceMapJsonFromUrl(url) {
-  return isDataUrl(url)
-    ? parseDataUrl(url)
-    : fetch(url).then(
-        task(res => {
-          return res.json();
-        }),
-      );
+async function getSourceMapJsonFromUrl(url, filename) {
+  if (isDataUrl(url)) {
+    return parseDataUrl(url);
+  }
+  const fullUrl = new URL(url, filename).href;
+  return fetch(fullUrl).then(
+    task(res => {
+      return res.json();
+    }),
+  );
 }
 
 function isDataUrl(url) {

fixtures/app/server.js

@@ -7,14 +7,14 @@ const sirv = require("sirv");
 const workerPath = require.resolve("css-to-js-sourcemap-worker");
 const wasmPath = path.join(path.dirname(workerPath), "mappings.wasm");
 
-const assets = sirv(path.join(__dirname, "static"));
+const assets = sirv(path.join(__dirname, "public"));
 const worker = sirv(path.dirname(workerPath));
 const wasm = sirv(path.dirname(wasmPath));
 
 const routes = {
-  "/no-map": "/no-map.js",
-  "/inline-map": "/inline-map.js",
-  "/external-map": "/external-map.js",
+  "/no-map": "/_static/no-map.js",
+  "/inline-map": "/_static/inline-map.js",
+  "/external-map": "/_static/external-map.js",
 };
 
 function createServer() {

fixtures/app/webpack.config.js

@@ -2,7 +2,7 @@
 
 const path = require("path");
 
-const outputDir = path.resolve(__dirname, "static");
+const outputDir = path.resolve(__dirname, "public/_static");
 
 const noMap = {
   entry: "./client.js",

tests/index.js

@@ -18,7 +18,7 @@ const fixtures = {
     "utf-8",
   ),
   clientNoMapRaw: fs.readFileSync(
-    require.resolve("css-to-js-sourcemap-fixture-app/static/no-map.js"),
+    require.resolve("css-to-js-sourcemap-fixture-app/public/_static/no-map.js"),
     "utf-8",
   ),
 };
@@ -39,7 +39,7 @@ test(`single mapped class works on /no-map`, async t => {
         t.equal(pos.column, 0, "mapped column matches expected");
         const {hostname, pathname, protocol} = new URL(pos.source);
         t.equal(hostname, "localhost");
-        t.equal(pathname, "/no-map.js");
+        t.equal(pathname, "/_static/no-map.js");
         t.equal(protocol, "http:");
         const content = consumer.sourceContentFor(pos.source);
         t.equal(
@@ -132,30 +132,36 @@ test(`replaying requests after invalidation`, async t => {
 
 function testSingleMap(route) {
   test(`single mapped class works on ${route}`, async t => {
-    const {page, browser, server} = await setup(route, async msg => {
-      if (msg.css) {
-        const lines = msg.css.split("\n");
-        t.equal(lines[0], ".__debug-1 {}", "has expected class on line 1");
-        const consumer = await getConsumer(msg.css);
-        const pos = consumer.originalPositionFor({line: 1, column: 0});
-        t.equal(pos.line, 5, "mapped line number matches expected");
-        t.equal(pos.column, 0, "mapped column matches expected");
-        t.equal(
-          pos.source,
-          "webpack:///client.js?n=0",
-          "mapped source matches expected",
-        );
-        const content = consumer.sourceContentFor("webpack:///client.js?n=0");
-        t.equal(
-          content,
-          fixtures.clientSource,
-          "mapped source content matches expected",
-        );
-        await browser.close();
-        server.close();
-        t.end();
-      }
-    });
+    const {page, browser, server} = await setup(
+      route,
+      async msg => {
+        if (msg.css) {
+          const lines = msg.css.split("\n");
+          t.equal(lines[0], ".__debug-1 {}", "has expected class on line 1");
+          const consumer = await getConsumer(msg.css);
+          const pos = consumer.originalPositionFor({line: 1, column: 0});
+          t.equal(pos.line, 5, "mapped line number matches expected");
+          t.equal(pos.column, 0, "mapped column matches expected");
+          t.equal(
+            pos.source,
+            "webpack:///client.js?n=0",
+            "mapped source matches expected",
+          );
+          const content = consumer.sourceContentFor("webpack:///client.js?n=0");
+          t.equal(
+            content,
+            fixtures.clientSource,
+            "mapped source content matches expected",
+          );
+          await browser.close();
+          server.close();
+          t.end();
+        }
+      },
+      () => {
+        t.fail("Recieved error");
+      },
+    );
     page.evaluate(() => {
       window.worker.postMessage({
         id: "init_wasm",