fix(css): don't transform sass function calls with namespace (#18414)

Author: sapphi-red

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

@@ -197,7 +197,7 @@ const commonjsProxyRE = /\?commonjs-proxy/
 const inlineRE = /[?&]inline\b/
 const inlineCSSRE = /[?&]inline-css\b/
 const styleAttrRE = /[?&]style-attr\b/
-const functionCallRE = /^[A-Z_][\w-]*\(/i
+const functionCallRE = /^[A-Z_][.\w-]*\(/i
 const transformOnlyRE = /[?&]transform-only\b/
 const nonEscapedDoubleQuoteRe = /(?<!\\)"/g
 

playground/css-sourcemap/__tests__/css-sourcemap.spec.ts

@@ -145,11 +145,11 @@ describe.runIf(isServe)('serve', () => {
           "/root/imported-nested.sass",
         ],
         "sourcesContent": [
-          "@import "/imported-nested.sass"
+          "@use "/imported-nested.sass"
 
       .imported
         &-sass
-          color: $primary
+          color: imported-nested.$primary
       ",
           "$primary: red
       ",

playground/css-sourcemap/imported.sass

@@ -1,5 +1,5 @@
-@import "/imported-nested.sass"
+@use "/imported-nested.sass"
 
 .imported
   &-sass
-    color: $primary
+    color: imported-nested.$primary

playground/css-sourcemap/vite.config.js

@@ -32,7 +32,7 @@ export default defineConfig({
         },
       },
       sass: {
-        silenceDeprecations: ['legacy-js-api'],
+        silenceDeprecations: ['legacy-js-api', 'import'],
       },
     },
   },

playground/css/nested/_index.scss

@@ -20,6 +20,6 @@ $var: '/ok.png';
 
 $var2: '/OK.PNG';
 .sass-url-starts-with-function-call {
-  background: url(to-lower-case($var2));
+  background: url(string.to-lower-case($var2));
   background-position: center;
 }

playground/css/sass.scss

@@ -1,13 +1,13 @@
-@import '=/nested'; // alias + custom index resolving -> /nested/_index.scss
-@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
-@import 'virtual-file-absolute';
-@import '=/scss-dir/main.scss'; // "./dir" reference from vite custom importer
+@use '=/nested'; // alias + custom index resolving -> /nested/_index.scss
+@use '=/nested/partial'; // sass convention: omitting leading _ for partials
+@use '@vitejs/test-css-dep'; // package w/ sass entry points
+@use '@vitejs/test-css-dep-exports'; // package with a sass export mapping
+@use '@vitejs/test-scss-proxy-dep'; // package with a sass proxy import
+@use 'virtual-dep'; // virtual file added through importer
+@use '=/pkg-dep'; // package w/out sass field
+@use '=/weapp.wxss'; // wxss file
+@use 'virtual-file-absolute';
+@use '=/scss-dir/main.scss'; // "./dir" reference from vite custom importer
 
 .sass {
   /* injected via vite.config.js */

playground/css/scss-dir/main.scss

@@ -1 +1 @@
-@import './dir';
+@use './dir';

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

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

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

@@ -34,7 +34,7 @@ export default defineConfig({
             },
             load() {
               return {
-                contents: `@import "${pathToFileURL(path.join(import.meta.dirname, 'file-absolute.scss')).href}"`,
+                contents: `@use "${pathToFileURL(path.join(import.meta.dirname, 'file-absolute.scss')).href}"`,
                 syntax: 'scss',
               }
             },

playground/css/vite.config.js

@@ -69,15 +69,15 @@ export default defineConfig({
           function (url) {
             return url === 'virtual-file-absolute'
               ? {
-                  contents: `@import "${pathToFileURL(path.join(import.meta.dirname, 'file-absolute.scss')).href}"`,
+                  contents: `@use "${pathToFileURL(path.join(import.meta.dirname, 'file-absolute.scss')).href}"`,
                 }
               : null
           },
           function (url) {
             return url.endsWith('.wxss') ? { contents: '' } : null
           },
         ],
-        silenceDeprecations: ['legacy-js-api'],
+        silenceDeprecations: ['legacy-js-api', 'import'],
       },
       styl: {
         additionalData: `$injectedColor ?= orange`,