fix(css): url() with variable in sass/less (fixes #3644, #7651) (#10741)

Co-authored-by: frank <frank@hebingjundeMacBook-Pro.local>

Author: sapphi-red

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

@@ -1495,7 +1495,7 @@ const scss: SassStylePreprocessor = async (
   const internalImporter: Sass.Importer = (url, importer, done) => {
     resolvers.sass(url, importer).then((resolved) => {
       if (resolved) {
-        rebaseUrls(resolved, options.filename, options.alias)
+        rebaseUrls(resolved, options.filename, options.alias, '$')
           .then((data) => done?.(data))
           .catch((data) => done?.(data))
       } else {
@@ -1579,7 +1579,8 @@ const sass: SassStylePreprocessor = (source, root, options, aliasResolver) =>
 async function rebaseUrls(
   file: string,
   rootFile: string,
-  alias: Alias[]
+  alias: Alias[],
+  variablePrefix: string
 ): Promise<Sass.ImporterReturnType> {
   file = path.resolve(file) // ensure os-specific flashes
   // in the same dir, no need to rebase
@@ -1604,6 +1605,8 @@ async function rebaseUrls(
   let rebased
   const rebaseFn = (url: string) => {
     if (url.startsWith('/')) return url
+    // ignore url's starting with variable
+    if (url.startsWith(variablePrefix)) return url
     // match alias, no need to rewrite
     for (const { find } of alias) {
       const matches =
@@ -1736,7 +1739,12 @@ function createViteLessPlugin(
           path.join(dir, '*')
         )
         if (resolved) {
-          const result = await rebaseUrls(resolved, this.rootFile, this.alias)
+          const result = await rebaseUrls(
+            resolved,
+            this.rootFile,
+            this.alias,
+            '@'
+          )
           let contents: string
           if (result && 'contents' in result) {
             contents = result.contents

playground/css/__tests__/css.spec.ts

@@ -10,6 +10,7 @@ import {
   removeFile,
   serverLogs,
   untilUpdated,
+  viteTestUrl,
   withRetry
 } from '~utils'
 
@@ -78,6 +79,7 @@ test('sass', async () => {
   const imported = await page.$('.sass')
   const atImport = await page.$('.sass-at-import')
   const atImportAlias = await page.$('.sass-at-import-alias')
+  const urlStartsWithVariable = await page.$('.sass-url-starts-with-variable')
   const partialImport = await page.$('.sass-partial')
 
   expect(await getColor(imported)).toBe('orange')
@@ -87,6 +89,9 @@ test('sass', async () => {
   expect(await getBg(atImportAlias)).toMatch(
     isBuild ? /base64/ : '/nested/icon.png'
   )
+  expect(await getBg(urlStartsWithVariable)).toMatch(
+    isBuild ? /ok\.\w+\.png/ : `${viteTestUrl}/ok.png`
+  )
   expect(await getColor(partialImport)).toBe('orchid')
 
   editFile('sass.scss', (code) =>
@@ -109,6 +114,7 @@ test('less', async () => {
   const imported = await page.$('.less')
   const atImport = await page.$('.less-at-import')
   const atImportAlias = await page.$('.less-at-import-alias')
+  const urlStartsWithVariable = await page.$('.less-url-starts-with-variable')
 
   expect(await getColor(imported)).toBe('blue')
   expect(await getColor(atImport)).toBe('darkslateblue')
@@ -117,6 +123,9 @@ test('less', async () => {
   expect(await getBg(atImportAlias)).toMatch(
     isBuild ? /base64/ : '/nested/icon.png'
   )
+  expect(await getBg(urlStartsWithVariable)).toMatch(
+    isBuild ? /ok\.\w+\.png/ : `${viteTestUrl}/ok.png`
+  )
 
   editFile('less.less', (code) => code.replace('@color: blue', '@color: red'))
   await untilUpdated(() => getColor(imported), 'red')

playground/css/composes-path-resolving.module.css

@@ -1,11 +1,11 @@
 .path-resolving-css {
-  composes: apply-color from '@/composed.module.css';
+  composes: apply-color from '=/composed.module.css';
 }
 
 .path-resolving-sass {
-  composes: apply-color from '@/composed.module.scss';
+  composes: apply-color from '=/composed.module.scss';
 }
 
 .path-resolving-less {
-  composes: apply-color from '@/composed.module.less';
+  composes: apply-color from '=/composed.module.less';
 }

playground/css/index.html

@@ -32,6 +32,7 @@ <h1>CSS</h1>
     contains alias
   </p>
   <p class="sass-partial">@import from SASS _partial: This should be orchid</p>
+  <p class="sass-url-starts-with-variable">url starts with variable</p>
   <p>Imported SASS string:</p>
   <pre class="imported-sass"></pre>
   <p class="sass-dep">
@@ -46,6 +47,7 @@ <h1>CSS</h1>
     @import from Less: This should be darkslateblue and have bg image which url
     contains alias
   </p>
+  <p class="less-url-starts-with-variable">url starts with variable</p>
   <p>Imported Less string:</p>
   <pre class="imported-less"></pre>
 

playground/css/less.less

@@ -1,4 +1,4 @@
-@import '@/nested/nested';
+@import '=/nested/nested';
 @import './nested/css-in-less.less';
 
 // Test data-uri calls with relative images.

playground/css/linked.css

@@ -1,4 +1,4 @@
-@import '@/linked-at-import.css';
+@import '=/linked-at-import.css';
 
 /* test postcss nesting */
 .wrapper {

playground/css/nested/_index.scss

@@ -7,5 +7,11 @@
 
 .sass-at-import-alias {
   color: olive;
-  background: url(@/nested/icon.png) 10px no-repeat;
+  background: url(=/nested/icon.png) 10px no-repeat;
+}
+
+$var: '/ok.png';
+.sass-url-starts-with-variable {
+  background: url($var);
+  background-position: center;
 }

playground/css/nested/nested.less

@@ -5,5 +5,11 @@
 
 .less-at-import-alias {
   color: darkslateblue;
-  background: url(@/nested/icon.png) 10px no-repeat;
+  background: url(=/nested/icon.png) 10px no-repeat;
+}
+
+@var: '/ok.png';
+.less-url-starts-with-variable {
+  background: url('@{var}');
+  background-position: center;
 }

playground/css/nested/nested.sss

@@ -5,4 +5,4 @@
 
 .sugarss-at-import-alias
   color: darkslateblue
-  background: url(@/nested/icon.png) 10px no-repeat
+  background: url(=/nested/icon.png) 10px no-repeat

playground/css/nested/nested.styl

@@ -3,4 +3,4 @@
 
 .stylus-import-alias
   color darkslateblue
-  background url('@/nested/icon.png') 10px no-repeat
+  background url('=/nested/icon.png') 10px no-repeat