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

Add the ability to prevent transforming some assets files #16682

Open
4 tasks done
CGNonofr opened this issue May 14, 2024 · 3 comments
Open
4 tasks done

Add the ability to prevent transforming some assets files #16682

CGNonofr opened this issue May 14, 2024 · 3 comments

Comments

@CGNonofr
Copy link

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 🤔

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

@CGNonofr
Copy link
Author

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
Copy link
Contributor

wmertens commented Jul 29, 2024

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants