fix(css): fix sass file:// reference (#17909)

Co-authored-by: patak <583075+patak-dev@users.noreply.github.com>

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

@@ -1085,17 +1085,27 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
     },
 
     get sass() {
-      return (
-        sassResolve ||
-        (sassResolve = config.createResolver({
+      if (!sassResolve) {
+        const resolver = config.createResolver({
           extensions: ['.scss', '.sass', '.css'],
           mainFields: ['sass', 'style'],
           conditions: ['sass', 'style'],
           tryIndex: true,
           tryPrefix: '_',
           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)
+            }
+          }
+          return resolver(...args)
+        }
+      }
+      return sassResolve
     },
 
     get less() {

playground/css/__tests__/css.spec.ts

@@ -93,6 +93,7 @@ test('sass', async () => {
     isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`,
   )
   expect(await getColor(partialImport)).toBe('orchid')
+  expect(await getColor(await page.$('.sass-file-absolute'))).toBe('orange')
 
   editFile('sass.scss', (code) =>
     code.replace('color: $injectedColor', 'color: red'),

playground/css/file-absolute.scss

@@ -0,0 +1,3 @@
+.sass-file-absolute {
+  color: orange;
+}

playground/css/index.html

@@ -41,6 +41,9 @@
   <p class="sass-dep">
     @import dependency w/ no scss entrypoint: this should be lavender
   </p>
+  <p class="sass-file-absolute">
+    @import "file:///xxx/absolute-path.scss" should be orange
+  </p>
 
   <p class="less">Less: This should be blue</p>
   <p class="less-at-import">

playground/css/sass.scss

@@ -6,6 +6,7 @@
 @import 'virtual-dep'; // virtual file added through importer
 @import '=/pkg-dep'; // package w/out sass field
 @import '=/weapp.wxss'; // wxss file
+@import 'virtual-file-absolute';
 
 .sass {
   /* injected via vite.config.js */

playground/css/vite.config-sass-modern-compiler.js

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import baseConfig from './vite.config.js'
+import configSassModern from './vite.config-sass-modern.js'
 
 export default defineConfig({
   ...baseConfig,
@@ -8,23 +9,7 @@ export default defineConfig({
     preprocessorOptions: {
       ...baseConfig.css.preprocessorOptions,
       scss: {
-        api: 'modern-compiler',
-        additionalData: `$injectedColor: orange;`,
-        importers: [
-          {
-            canonicalize(url) {
-              return url === 'virtual-dep'
-                ? new URL('custom-importer:virtual-dep')
-                : null
-            },
-            load() {
-              return {
-                contents: ``,
-                syntax: 'scss',
-              }
-            },
-          },
-        ],
+        ...configSassModern.css.preprocessorOptions.scss,
       },
     },
   },

playground/css/vite.config-sass-modern.js

@@ -1,3 +1,5 @@
+import { pathToFileURL } from 'node:url'
+import path from 'node:path'
 import { defineConfig } from 'vite'
 import baseConfig from './vite.config.js'
 
@@ -24,6 +26,19 @@ export default defineConfig({
               }
             },
           },
+          {
+            canonicalize(url) {
+              return url === 'virtual-file-absolute'
+                ? new URL('custom-importer:virtual-file-absolute')
+                : null
+            },
+            load() {
+              return {
+                contents: `@import "${pathToFileURL(path.join(import.meta.dirname, 'file-absolute.scss')).href}"`,
+                syntax: 'scss',
+              }
+            },
+          },
         ],
       },
     },

playground/css/vite.config.js

@@ -1,4 +1,5 @@
 import path from 'node:path'
+import { pathToFileURL } from 'node:url'
 import stylus from 'stylus'
 import { defineConfig } from 'vite'
 
@@ -65,6 +66,13 @@ export default defineConfig({
           function (url) {
             return url === 'virtual-dep' ? { contents: '' } : null
           },
+          function (url) {
+            return url === 'virtual-file-absolute'
+              ? {
+                  contents: `@import "${pathToFileURL(path.join(import.meta.dirname, 'file-absolute.scss')).href}"`,
+                }
+              : null
+          },
           function (url) {
             return url.endsWith('.wxss') ? { contents: '' } : null
           },