fix(css): @import with .css in node_modules importing a different package failed to resolve (#15000)

Co-authored-by: Shaoyu Meng <shaoyu>
Co-authored-by: 翠 / green <green@sapphi.red>

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

@@ -1844,7 +1844,13 @@ const scss: SassStylePreprocessor = async (
     importer = cleanScssBugUrl(importer)
     resolvers.sass(url, importer).then((resolved) => {
       if (resolved) {
-        rebaseUrls(resolved, options.filename, options.alias, '$')
+        rebaseUrls(
+          resolved,
+          options.filename,
+          options.alias,
+          '$',
+          resolvers.sass,
+        )
           .then((data) => done?.(fixScssBugImportValue(data)))
           .catch((data) => done?.(data))
       } else {
@@ -1930,6 +1936,7 @@ async function rebaseUrls(
   rootFile: string,
   alias: Alias[],
   variablePrefix: string,
+  resolver: ResolveFn,
 ): Promise<Sass.ImporterReturnType> {
   file = path.resolve(file) // ensure os-specific flashes
   // in the same dir, no need to rebase
@@ -1952,7 +1959,7 @@ async function rebaseUrls(
   }
 
   let rebased
-  const rebaseFn = (url: string) => {
+  const rebaseFn = async (url: string) => {
     if (url[0] === '/') return url
     // ignore url's starting with variable
     if (url.startsWith(variablePrefix)) return url
@@ -1964,7 +1971,7 @@ async function rebaseUrls(
         return url
       }
     }
-    const absolute = path.resolve(fileDir, url)
+    const absolute = (await resolver(url, file)) || path.resolve(fileDir, url)
     const relative = path.relative(rootDir, absolute)
     return normalizePath(relative)
   }
@@ -2093,6 +2100,7 @@ function createViteLessPlugin(
             this.rootFile,
             this.alias,
             '@',
+            this.resolvers.less,
           )
           let contents: string
           if (result && 'contents' in result) {

playground/css/__tests__/css.spec.ts

@@ -292,6 +292,10 @@ test('@import dependency that @import another dependency', async () => {
   expect(await getColor('.css-proxy-dep')).toBe('purple')
 })
 
+test('@import scss dependency that has @import with a css extension pointing to another dependency', async () => {
+  expect(await getColor('.scss-proxy-dep')).toBe('purple')
+})
+
 test('@import dependency w/out package scss', async () => {
   expect(await getColor('.sass-dep')).toBe('lavender')
 })

playground/css/index.html

@@ -143,6 +143,10 @@
   <p class="css-proxy-dep">
     @import dependency that @import another dependency: this should be purple
   </p>
+  <p class="scss-proxy-dep">
+    @import dependency that has @import with a css extension pointing to another
+    dependency: this should be purple
+  </p>
 
   <p class="dir-dep">PostCSS dir-dependency: this should be grey</p>
   <p class="dir-dep-2">

playground/css/package.json

@@ -20,6 +20,7 @@
     "@vitejs/test-css-dep-exports": "link:./css-dep-exports",
     "@vitejs/test-css-js-dep": "file:./css-js-dep",
     "@vitejs/test-css-proxy-dep": "file:./css-proxy-dep",
+    "@vitejs/test-scss-proxy-dep": "file:./scss-proxy-dep",
     "fast-glob": "^3.3.2",
     "less": "^4.2.0",
     "postcss-nested": "^6.0.1",

playground/css/sass.scss

@@ -2,6 +2,7 @@
 @import '=/nested/partial'; // sass convention: omitting leading _ for partials
 @import '@vitejs/test-css-dep'; // package w/ sass entry points
 @import '@vitejs/test-css-dep-exports'; // package with a sass export mapping
+@import '@vitejs/test-scss-proxy-dep'; // package with a sass proxy import
 @import 'virtual-dep'; // virtual file added through importer
 @import '=/pkg-dep'; // package w/out sass field
 @import '=/weapp.wxss'; // wxss file

playground/css/scss-proxy-dep-nested/index.css

@@ -0,0 +1,3 @@
+.scss-proxy-dep {
+  color: purple;
+}

playground/css/scss-proxy-dep-nested/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vitejs/test-scss-proxy-dep-nested",
+  "private": true,
+  "version": "1.0.0"
+}

playground/css/scss-proxy-dep/index.scss

@@ -0,0 +1 @@
+@import '@vitejs/test-scss-proxy-dep-nested/index.css';

playground/css/scss-proxy-dep/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@vitejs/test-scss-proxy-dep",
+  "private": true,
+  "version": "1.0.0",
+  "sass": "index.scss",
+  "dependencies": {
+    "@vitejs/test-scss-proxy-dep-nested": "file:../scss-proxy-dep-nested"
+  }
+}

pnpm-lock.yaml

@@ -514,6 +514,9 @@ importers:
       '@vitejs/test-css-proxy-dep':
         specifier: file:./css-proxy-dep
         version: file:playground/css/css-proxy-dep
+      '@vitejs/test-scss-proxy-dep':
+        specifier: file:./scss-proxy-dep
+        version: file:playground/css/scss-proxy-dep
       fast-glob:
         specifier: ^3.3.2
         version: 3.3.2
@@ -592,6 +595,14 @@ importers:
 
   playground/css/postcss-caching/green-app: {}
 
+  playground/css/scss-proxy-dep:
+    dependencies:
+      '@vitejs/test-scss-proxy-dep-nested':
+        specifier: file:../scss-proxy-dep-nested
+        version: file:playground/css/scss-proxy-dep-nested
+
+  playground/css/scss-proxy-dep-nested: {}
+
   playground/data-uri: {}
 
   playground/define:
@@ -10130,6 +10141,17 @@ packages:
     resolution: {directory: playground/css/css-proxy-dep-nested, type: directory}
     name: '@vitejs/test-css-proxy-dep-nested'
 
+  file:playground/css/scss-proxy-dep:
+    resolution: {directory: playground/css/scss-proxy-dep, type: directory}
+    name: '@vitejs/test-scss-proxy-dep'
+    dependencies:
+      '@vitejs/test-scss-proxy-dep-nested': file:playground/css/scss-proxy-dep-nested
+    dev: true
+
+  file:playground/css/scss-proxy-dep-nested:
+    resolution: {directory: playground/css/scss-proxy-dep-nested, type: directory}
+    name: '@vitejs/test-scss-proxy-dep-nested'
+
   file:playground/define/commonjs-dep:
     resolution: {directory: playground/define/commonjs-dep, type: directory}
     name: '@vitejs/test-commonjs-dep'