fix: Use relative paths in sources for esbuild

This refines the fix from #4985 to
turn absolute paths into relative paths for the `sources` array in
source maps generated by esbuild (and therefore 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]. It doesn't change anything when using
SvelteKit (where the problem did not exist in the first place). When
using SolidStart, the problem still persists, likely because it doesn't
use the `transformWithEsbuild` function, and therefore needs a follow up
fix.

Bug: https://crbug.com/1411596
Ref: #4964
Ref: #4912

[^1]: https://goo.gle/devtools-vite-interoperability

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,8 +191,14 @@ export async function transformWithEsbuild(
           ? JSON.parse(result.map)
           : { mappings: '' }
     }
-    if (Array.isArray(map.sources)) {
-      map.sources = map.sources.map((it) => toUpperCaseDriveLetter(it))
+    if (Array.isArray(map.sources) && path.isAbsolute(filename)) {
+      const sourceFolder = path.dirname(filename)
+      map.sources = map.sources.map((source) => {
+        if (path.isAbsolute(source)) {
+          source = path.relative(sourceFolder, source)
+        }
+        return source
+      })
     }
     return {
       ...result,

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