Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
7 tasks done
karlvr opened this issue Jan 22, 2025 · 0 comments · Fixed by #19269
Closed
7 tasks done
Labels
feat: css p2-edge-case Bug, but has workaround or limited in scope (priority)

Comments

@karlvr
Copy link
Contributor

karlvr commented Jan 22, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: css p2-edge-case Bug, but has workaround or limited in scope (priority)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants