fix(css): less @plugin imports of JS files treated as CSS and rebased (fix #19268) (#19269)

Author: karlvr

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

@@ -2776,6 +2776,7 @@ const makeLessWorker = (
     filename: string,
     dir: string,
     rootFile: string,
+    mime: string | undefined,
   ) => {
     const resolved = await resolvers.less(
       environment,
@@ -2784,6 +2785,12 @@ const makeLessWorker = (
     )
     if (!resolved) return undefined
 
+    // don't rebase URLs in JavaScript plugins
+    if (mime === 'application/javascript') {
+      const file = path.resolve(resolved) // ensure os-specific flashes
+      return { resolved: file }
+    }
+
     const result = await rebaseUrls(
       environment,
       resolved,
@@ -2829,7 +2836,12 @@ const makeLessWorker = (
             opts: any,
             env: any,
           ): Promise<Less.FileLoadResult> {
-            const result = await viteLessResolve(filename, dir, this.rootFile)
+            const result = await viteLessResolve(
+              filename,
+              dir,
+              this.rootFile,
+              opts.mime,
+            )
             if (result) {
               return {
                 filename: path.resolve(result.resolved),

playground/css/__tests__/css.spec.ts

@@ -108,6 +108,13 @@ test('less', async () => {
   await untilUpdated(() => getColor(atImport), 'blue')
 })
 
+test('less-plugin', async () => {
+  const body = await page.$('body')
+  expect(await getBg(body)).toBe(
+    'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wIAAgEBAFPIhPsAAAAASUVORK5CYII=")',
+  )
+})
+
 test('stylus', async () => {
   const imported = await page.$('.stylus')
   const additionalData = await page.$('.stylus-additional-data')

playground/css/less-plugin.less

@@ -0,0 +1,5 @@
+@plugin "less-plugin/test.js";
+
+body {
+  background-image: test();
+}

playground/css/less-plugin/test.js

@@ -0,0 +1,5 @@
+functions.add('test', function test() {
+  const transparentPng =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wIAAgEBAFPIhPsAAAAASUVORK5CYII='
+  return `url(${transparentPng})`
+})

playground/css/main.js

@@ -3,6 +3,7 @@ import './imported.css'
 import './sugarss.sss'
 import './sass.scss'
 import './less.less'
+import './less-plugin.less'
 import './stylus.styl'
 import './manual-chunk.css'