Skip to content

Less @plugin imports of JavaScript files get run through rebaseUrls which expects CSS contents #19268

@karlvr

Description

@karlvr

Describe the bug

Less files can contain @plugin "plugin.js"; style imports, which reference JavaScript files. When Vite runs on a .less file that contains a @plugin import the makeLessWorker function calls viteLessResolve with the plugin.js file (in this example), which then calls rebaseUrls, which is expecting to have received a CSS file and runs a bunch of regex including rebasing url(...)s, which is breaking my JavaScript file which contains that string!

I am currently investigating and I hope to be able to provide a PR…

Currently it appears that the loadFile function on ViteLessManager could look at the opts to observe that the opts.mime === 'application/javascript' and skip viteLessResolve.

Reproduction

https://github.com/karlvr/vite-less-plugin-bug

Steps to reproduce

  • The src/main.less file imports the src/plugins/test.js plugin and then uses it in the background-image attribute.
  • The src/plugins/test.js includes the string url( to demonstrate the bug, as rebaseUrls mistakenly transforms it, thinking the file is CSS
  • The output dist/assets/index-CWZCrLGA.css demonstrates the output; the url(...), which should just contain the data uri, is prefixed with the base of the src/plugins/test.js file: url(plugins/data:image/png;base64...

System Info

System:
    OS: macOS 15.1.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 200.50 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
    pnpm: 9.12.1 - ~/.nvm/versions/node/v20.17.0/bin/pnpm
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 132.0.6834.83
    Safari: 18.1.1
  npmPackages:
    @vitejs/plugin-legacy: ^6.0.0 => 6.0.0 
    vite: ^6.0.7 => 6.0.7

Used Package Manager

pnpm

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    feat: cssp2-edge-caseBug, but has workaround or limited in scope (priority)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions