From 172c3e36226ec4bdf2c9d5f8fa84310bde3fec54 Mon Sep 17 00:00:00 2001
From: Benedikt Meurer <bmeurer@google.com>
Date: Thu, 16 Feb 2023 09:14:11 +0100
Subject: [PATCH] fix: use relative paths in `sources` of transformed source
 maps

This refines the fix from https://github.com/vitejs/vite/pull/4985 to
turn absolute paths into relative paths for the `sources` array in
source maps for transformer outputs (and thereby completely avoids the
Windows drive letter problem). In order to minimize unintended negative
side effects, we perform this step only when the source file name is
absolute.

This addresses the issue that source files show up with an absolute path
prefix in case of Vue[^1].

Bug: https://crbug.com/1411596
Ref: https://github.com/vitejs/vite/issues/4964
Ref: https://github.com/vitejs/vite/issues/4912

[^1]: https://goo.gle/devtools-vite-interoperability
---
 packages/vite/src/node/plugins/esbuild.ts     |  4 ----
 .../vite/src/node/server/transformRequest.ts  | 21 +++++++++++++++++++
 packages/vite/src/node/utils.ts               |  4 ----
 .../__tests__/css-sourcemap.spec.ts           |  4 ++--
 .../__tests__/js-sourcemap.spec.ts            |  2 +-
 5 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/vite/src/node/plugins/esbuild.ts b/packages/vite/src/node/plugins/esbuild.ts
index c85665f1aadffa..24323a6a0b7355 100644
--- a/packages/vite/src/node/plugins/esbuild.ts
+++ b/packages/vite/src/node/plugins/esbuild.ts
@@ -18,7 +18,6 @@ import {
   createFilter,
   ensureWatchedFile,
   generateCodeFrame,
-  toUpperCaseDriveLetter,
 } from '../utils'
 import type { ResolvedConfig, ViteDevServer } from '..'
 import type { Plugin } from '../plugin'
@@ -192,9 +191,6 @@ export async function transformWithEsbuild(
           ? JSON.parse(result.map)
           : { mappings: '' }
     }
-    if (Array.isArray(map.sources)) {
-      map.sources = map.sources.map((it) => toUpperCaseDriveLetter(it))
-    }
     return {
       ...result,
       map,
diff --git a/packages/vite/src/node/server/transformRequest.ts b/packages/vite/src/node/server/transformRequest.ts
index a75d78c0b6af5e..662db957b7cc8d 100644
--- a/packages/vite/src/node/server/transformRequest.ts
+++ b/packages/vite/src/node/server/transformRequest.ts
@@ -271,6 +271,27 @@ async function loadAndTransform(
     if (map.mappings && !map.sourcesContent) {
       await injectSourcesContent(map, mod.file, logger)
     }
+    for (
+      let sourcesIndex = 0;
+      sourcesIndex < map.sources.length;
+      ++sourcesIndex
+    ) {
+      const sourcePath = map.sources[sourcesIndex]
+
+      // Rewrite sources to relative paths to give debuggers the chance
+      // to resolve and display them in a meaningful way (rather than
+      // with absolute paths).
+      if (
+        sourcePath &&
+        path.isAbsolute(sourcePath) &&
+        path.isAbsolute(mod.file)
+      ) {
+        map.sources[sourcesIndex] = path.relative(
+          path.dirname(mod.file),
+          sourcePath,
+        )
+      }
+    }
   }
 
   const result =
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index 13ef1c8c91326e..738e323f8c8739 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -909,10 +909,6 @@ export function arraify<T>(target: T | T[]): T[] {
   return Array.isArray(target) ? target : [target]
 }
 
-export function toUpperCaseDriveLetter(pathName: string): string {
-  return pathName.replace(/^\w:/, (letter) => letter.toUpperCase())
-}
-
 // Taken from https://stackoverflow.com/a/36328890
 export const multilineCommentsRE = /\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\//g
 export const singlelineCommentsRE = /\/\/.*/g
diff --git a/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts b/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts
index a6f89f8457dc96..696864b12ffd64 100644
--- a/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts
+++ b/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts
@@ -70,8 +70,8 @@ describe.runIf(isServe)('serve', () => {
       {
         "mappings": "AAAA;EACE,UAAU;AACZ;;ACAA;EACE,UAAU;AACZ",
         "sources": [
-          "/root/be-imported.css",
-          "/root/linked-with-import.css",
+          "be-imported.css",
+          "linked-with-import.css",
         ],
         "sourcesContent": [
           ".be-imported {
diff --git a/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts b/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts
index 5a6d37dd421ca5..692de4c8ed2c6e 100644
--- a/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts
+++ b/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts
@@ -24,7 +24,7 @@ if (!isBuild) {
       {
         "mappings": "AAAO,aAAM,MAAM;",
         "sources": [
-          "/root/bar.ts",
+          "bar.ts",
         ],
         "sourcesContent": [
           "export const bar = 'bar'