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

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 @@ <h1>CSS</h1>
  <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
  },