fix(less): prevent rebasing @import url(...) (#17857)

Co-authored-by: shaoyu <shaoyu>
Co-authored-by: bluwy <bjornlu.dev@gmail.com>

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

@@ -1682,10 +1682,11 @@ type CssUrlReplacer = (
 ) => string | Promise<string>
 // https://drafts.csswg.org/css-syntax-3/#identifier-code-point
 export const cssUrlRE =
-  /(?<=^|[^\w\-\u0080-\uffff])url\((\s*('[^']+'|"[^"]+")\s*|[^'")]+)\)/
+  /(?<!@import\s+)(?<=^|[^\w\-\u0080-\uffff])url\((\s*('[^']+'|"[^"]+")\s*|[^'")]+)\)/
 export const cssDataUriRE =
   /(?<=^|[^\w\-\u0080-\uffff])data-uri\((\s*('[^']+'|"[^"]+")\s*|[^'")]+)\)/
-export const importCssRE = /@import ('[^']+\.css'|"[^"]+\.css"|[^'")]+\.css)/
+export const importCssRE =
+  /@import\s+(?:url\()?('[^']+\.css'|"[^"]+\.css"|[^'"\s)]+\.css)/
 // Assuming a function name won't be longer than 256 chars
 // eslint-disable-next-line regexp/no-unused-capturing-group -- doesn't detect asyncReplace usage
 const cssImageSetRE = /(?<=image-set\()((?:[\w-]{1,256}\([^)]*\)|[^)])*)(?=\))/
@@ -1849,7 +1850,8 @@ async function doImportCSSReplace(
     return matched
   }
 
-  return `@import ${wrap}${await replacer(rawUrl)}${wrap}`
+  const prefix = matched.includes('url(') ? 'url(' : ''
+  return `@import ${prefix}${wrap}${await replacer(rawUrl)}${wrap}`
 }
 
 async function minifyCSS(

playground/css/__tests__/css.spec.ts

@@ -116,6 +116,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 atImportUrlOmmer = await page.$('.less-at-import-url-ommer')
   const urlStartsWithVariable = await page.$('.less-url-starts-with-variable')
 
   expect(await getColor(imported)).toBe('blue')
@@ -125,6 +126,7 @@ test('less', async () => {
   expect(await getBg(atImportAlias)).toMatch(
     isBuild ? /base64/ : '/nested/icon.png',
   )
+  expect(await getColor(atImportUrlOmmer)).toBe('darkorange')
   expect(await getBg(urlStartsWithVariable)).toMatch(
     isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`,
   )

playground/css/index.html

@@ -52,6 +52,9 @@
     @import from Less: This should be darkslateblue and have bg image which url
     contains alias
   </p>
+  <p class="less-at-import-url-ommer">
+    @import url() from Less: This should be darkorange
+  </p>
   <p class="less-url-starts-with-variable">url starts with variable</p>
 
   <div class="form-box-data-uri">

playground/css/less/components/form.less

@@ -1,3 +1,5 @@
+@import url('../../less/ommer.less');
+
 .form-box-data-uri {
   // data-uri() calls with relative paths should be replaced just like urls.
   background-image: data-uri('../images/backgrounds/form-select.svg');

playground/css/less/ommer.less

@@ -0,0 +1,3 @@
+.less-at-import-url-ommer {
+  color: darkorange;
+}