fix(css): root relative import in sass modern API on Windows (#18945)

Author: sapphi-red

packages/vite/src/node/plugins/css.ts

@@ -82,7 +82,7 @@ import {
   urlRE,
 } from '../utils'
 import type { Logger } from '../logger'
-import { cleanUrl, slash } from '../../shared/utils'
+import { cleanUrl, isWindows, slash } from '../../shared/utils'
 import { createBackCompatIdResolver } from '../idResolver'
 import type { ResolveIdFn } from '../idResolver'
 import { PartialEnvironment } from '../baseEnvironment'
@@ -1162,8 +1162,14 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
           preferRelative: true,
         })
         sassResolve = async (...args) => {
+          // the modern API calls `canonicalize` with resolved file URLs
+          // for relative URLs before raw specifiers
           if (args[1].startsWith('file://')) {
-            args[1] = fileURLToPath(args[1])
+            args[1] = fileURLToPath(args[1], {
+              windows:
+                // file:///foo cannot be converted to path with windows mode
+                isWindows && args[1].startsWith('file:///') ? false : undefined,
+            })
           }
           return resolver(...args)
         }

playground/css/__tests__/css.spec.ts

@@ -101,6 +101,7 @@ test('sass', async () => {
   expect(await getColor(partialImport)).toBe('orchid')
   expect(await getColor(await page.$('.sass-file-absolute'))).toBe('orange')
   expect(await getColor(await page.$('.sass-dir-index'))).toBe('orange')
+  expect(await getColor(await page.$('.sass-root-relative'))).toBe('orange')
 
   if (isBuild) return
 

playground/css/index.html

@@ -43,6 +43,9 @@ <h1>CSS</h1>
     @import "file:///xxx/absolute-path.scss" should be orange
   </p>
   <p class="sass-dir-index">@import "./dir" should be orange</p>
+  <p class="sass-root-relative">
+    @import "/nested/root-relative.scss" should be orange
+  </p>
 
   <p class="less">Less: This should be blue</p>
   <p class="less-at-import">

playground/css/nested/_index.scss

@@ -1,4 +1,5 @@
 @use 'sass:string';
+@use '/nested/root-relative'; // root relative path
 
 @import './css-in-scss.css';
 

playground/css/nested/root-relative.scss

@@ -0,0 +1,3 @@
+.sass-root-relative {
+  color: orange;
+}