Add the ability to prevent transforming some assets files

[CGNonofr]

Description

In my app, I use the new URL('...', import.meta.url) syntax to get some assets URLs, including some CSS files. I then reference that asset in a document inside an iframe.

The problem is: vite is transforming my css files to resolve image references (url(<image path>)). While it's fine and expected in most cases, it's a big problem in my specific case, because the content of the css file is then digested by some code that already tries to resolve the real image urls inside the css at runtime.

I didn't find any way currently, even hacky, to prevent vite from trying to transform some asset files using the new URL(..., import.meta.url) syntax (except renaming the file to change its extension)

There is an assetsInclude option that seems to do what I want, but it doesn't seem to support the new URL(...) syntax as it seems to transform my asset to an html page displaying a Unexpected end of input error :thinking:

Suggested solution

I see 2 possible solutions:

• add a query parameter on asset urls (like new URL('./myImage.png?raw', import.meta.url))
• make assetsInclude work with new URL(...) syntax if it's relevant, or add another option

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[CGNonofr]

Just realized the build behavior is different than the dev behavior: in build mode, asset loaded with the new URL(...) syntax never get transformed, so a third solution can be to homogenize behaviors and consider it as a bug?

[wmertens]

I also would like ?raw&url to work. It is implemented here but doesn't support combining.

Furthermore, indeed dev and build behavior is different regarding post-processing.

I think the assets plugin should work as follows:

• resolveId: if raw and/or url query parameters are present, strip them, this.resolve the resulting id and and prefix it with \0(raw|url|rawurl):
• load: the \0 ensures we get a look first
  • Strip it, and if it contained raw, read the rest of the id as a file from disk, otherwise use this.load on the rest of the id. (This should in theory transform it but not sure if that works)
  • If it contained url, store the loaded data as an asset and generate the URL as before
  • if it contained raw, generate a JS file as before
• transform: the \0 ensures that the load result doesn't get transformed further

This way, you can choose whether to process the file or not.

Does that seem right?

[wmertens]

also, the placeholder should be something like http://__VITE_ASSET... so that is valid inside url() in css (see #17559)