From 9b001baa70c8489ac5550107c110a5dca281cda4 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 3 Sep 2024 05:43:50 +0900
Subject: [PATCH] fix(css): fix directory index import in sass modern api
 (#17960)

---
 packages/vite/src/node/plugins/css.ts  | 19 ++++++++++++-------
 playground/css/__tests__/css.spec.ts   |  1 +
 playground/css/index.html              |  1 +
 playground/css/sass.scss               |  1 +
 playground/css/scss-dir/dir/index.scss |  3 +++
 playground/css/scss-dir/main.scss      |  1 +
 6 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 playground/css/scss-dir/dir/index.scss
 create mode 100644 playground/css/scss-dir/main.scss

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 05227b3fc89292..1f98267c3059d3 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -1095,12 +1095,8 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
           preferRelative: true,
         })
         sassResolve = async (...args) => {
-          const id = args[0]
-          if (id.startsWith('file://')) {
-            const fileUrl = new URL(id)
-            if (fs.existsSync(fileUrl)) {
-              return fileURLToPath(fileUrl)
-            }
+          if (args[0].startsWith('file://')) {
+            args[0] = fileURLToPath(args[0])
           }
           return resolver(...args)
         }
@@ -2102,6 +2098,7 @@ const makeScssWorker = (
   resolvers: CSSAtImportResolvers,
   alias: Alias[],
   maxWorkers: number | undefined,
+  packageName: 'sass' | 'sass-embedded',
 ) => {
   const internalImporter = async (
     url: string,
@@ -2119,6 +2116,9 @@ const makeScssWorker = (
           '$',
           resolvers.sass,
         )
+        if (packageName === 'sass-embedded') {
+          return data
+        }
         return fixScssBugImportValue(data)
       } catch (data) {
         return data
@@ -2411,7 +2411,12 @@ const scssProcessor = (
             ? makeModernCompilerScssWorker(resolvers, options.alias, maxWorkers)
             : api === 'modern'
               ? makeModernScssWorker(resolvers, options.alias, maxWorkers)
-              : makeScssWorker(resolvers, options.alias, maxWorkers),
+              : makeScssWorker(
+                  resolvers,
+                  options.alias,
+                  maxWorkers,
+                  sassPackage.name,
+                ),
         )
       }
       const worker = workerMap.get(options.alias)!
diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index 14894bf11e4228..5bdb49277269af 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -94,6 +94,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')
 
   editFile('sass.scss', (code) =>
     code.replace('color: $injectedColor', 'color: red'),
diff --git a/playground/css/index.html b/playground/css/index.html
index 396ffc02fd3d27..45a38cdf9341b8 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -44,6 +44,7 @@ <h1>CSS</h1>
   <p class="sass-file-absolute">
     @import "file:///xxx/absolute-path.scss" should be orange
   </p>
+  <p class="sass-dir-index">@import "./dir" should be orange</p>
 
   <p class="less">Less: This should be blue</p>
   <p class="less-at-import">
diff --git a/playground/css/sass.scss b/playground/css/sass.scss
index 44beb140e3fe3a..a49fcf1e8f3692 100644
--- a/playground/css/sass.scss
+++ b/playground/css/sass.scss
@@ -7,6 +7,7 @@
 @import '=/pkg-dep'; // package w/out sass field
 @import '=/weapp.wxss'; // wxss file
 @import 'virtual-file-absolute';
+@import '=/scss-dir/main.scss'; // "./dir" reference from vite custom importer
 
 .sass {
   /* injected via vite.config.js */
diff --git a/playground/css/scss-dir/dir/index.scss b/playground/css/scss-dir/dir/index.scss
new file mode 100644
index 00000000000000..e6bcdc2166b8ab
--- /dev/null
+++ b/playground/css/scss-dir/dir/index.scss
@@ -0,0 +1,3 @@
+.sass-dir-index {
+  color: orange;
+}
diff --git a/playground/css/scss-dir/main.scss b/playground/css/scss-dir/main.scss
new file mode 100644
index 00000000000000..2f3723f11945ca
--- /dev/null
+++ b/playground/css/scss-dir/main.scss
@@ -0,0 +1 @@
+@import './dir';