fix(css): skip non css in custom sass importer (#18970)

Co-authored-by: 翠 / green <[email protected]>

.prettierignore

@@ -13,3 +13,4 @@ playground/html/valid.html
 playground/external/public/[email protected]
 playground/ssr-html/public/[email protected]
 playground/worker/classic-worker.js
+playground/css/weapp.wxss

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

@@ -2380,7 +2380,20 @@ const makeModernScssWorker = (
               ? fileURLToPath(context.containingUrl)
               : options.filename
             const resolved = await internalCanonicalize(url, importer)
-            return resolved ? pathToFileURL(resolved) : null
+            if (
+              resolved &&
+              // only limit to these extensions because:
+              // - for the `@import`/`@use`s written in file loaded by `load` function,
+              //   the `canonicalize` function of that `importer` is called first
+              // - the `load` function of an importer is only called for the importer
+              //   that returned a non-null result from its `canonicalize` function
+              (resolved.endsWith('.css') ||
+                resolved.endsWith('.scss') ||
+                resolved.endsWith('.sass'))
+            ) {
+              return pathToFileURL(resolved)
+            }
+            return null
           },
           async load(canonicalUrl) {
             const ext = path.extname(canonicalUrl.pathname)
@@ -2469,7 +2482,15 @@ const makeModernCompilerScssWorker = (
             url,
             cleanScssBugUrl(importer),
           )
-          return resolved ? pathToFileURL(resolved) : null
+          if (
+            resolved &&
+            (resolved.endsWith('.css') ||
+              resolved.endsWith('.scss') ||
+              resolved.endsWith('.sass'))
+          ) {
+            return pathToFileURL(resolved)
+          }
+          return null
         },
         async load(canonicalUrl) {
           const ext = path.extname(canonicalUrl.pathname)

playground/css/nested/_index.scss

@@ -1,5 +1,6 @@
 @use 'sass:string';
 @use '/nested/root-relative'; // root relative path
+@use '../weapp.wxss'; // test user's custom importer in a file loaded by vite's custom importer
 
 @import './css-in-scss.css';
 

playground/css/vite.config.js

@@ -65,7 +65,7 @@ export default defineConfig({
         importers: [
           {
             canonicalize(url) {
-              return url === 'virtual-dep'
+              return url === 'virtual-dep' || url.endsWith('.wxss')
                 ? new URL('custom-importer:virtual-dep')
                 : null
             },

playground/css/weapp.wxss

@@ -0,0 +1 @@
+this is not css