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

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

Merged
merged 3 commits into from
Feb 4, 2025

Conversation

karlvr
Copy link
Contributor

@karlvr karlvr commented Jan 22, 2025

Description

Fixes #19268:

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!

This PR resolves the issue by using the mime value that comes from less and indicates that it's loading a JavaScript file. For .less files this mime value is undefined, so checking explicitly for application/javascript seems like a good option. There is no doubt another option for detecting this situation (when we shouldn't treat the file as CSS and rebase it).

I have added a test case based on the example...

Example

I have setup a basic example of this bug at https://github.com/karlvr/vite-less-plugin-bug:

  • 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...

@sapphi-red sapphi-red added feat: css p2-edge-case Bug, but has workaround or limited in scope (priority) labels Feb 4, 2025
@sapphi-red sapphi-red changed the title fix: less @plugin imports of javascript files treated as CSS and rebased (fix #19268) fix(css): less @plugin imports of JS files treated as CSS and rebased (fix #19268) Feb 4, 2025
Copy link
Member

@sapphi-red sapphi-red left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@sapphi-red sapphi-red merged commit 602b373 into vitejs:main Feb 4, 2025
15 checks passed
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 this pull request may close these issues.

Less @plugin imports of JavaScript files get run through rebaseUrls which expects CSS contents
2 participants