You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 🤔
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
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?
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.
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 thenew URL(...)
syntax as it seems to transform my asset to an html page displaying aUnexpected end of input
error 🤔Suggested solution
I see 2 possible solutions:
new URL('./myImage.png?raw', import.meta.url)
)assetsInclude
work withnew URL(...)
syntax if it's relevant, or add another optionAlternative
No response
Additional context
No response
Validations
The text was updated successfully, but these errors were encountered: