fix(css): fix directory index import in sass modern api (#17960)

vitejs · Sep 2, 2024 · 9b001ba · 9b001ba
1 parent 5c5f82c
commit 9b001ba
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
+@import './dir';