Feature request: Optimize images in existing data uri's in CSS files

[captbaritone]

🙋 feature request

Optimize images in existing data uri's in CSS files

🤔 Expected Behavior

If I have a .png (or similar) image encoded as a data uri in a CSS file, and I import that CSS file, Parcel should run image optimizations on that image file.

😯 Current Behavior

Parcel does not seem to run optimizations on these files.

💁 Possible Solution

If this is possible to implement as a plugin to Parcel, pointers to how to go about it would be appreciated as well.

🔦 Context

I have a custom built postcss plugin to do this currently, and it would be nice to not need postcss after I migrate to Parcel.

Extra

Feel free to close. I know this is quite an edge case, but I figured I'd ask, since it does seem like the type of thing Parcel might want to do.

[mischnic]

This really boils down to extracting inline data-url assets in transformers/resolver. Just like we do for inline <script>s in HTML.
And same goes for import "data:text/javascript,console.log();" as well.

Might be nice to have this logic in the resolver so it works for every transformer, but not sure if that's feasible.

[devongovett]

I think it should be possible with a resolver plugin already, but we might need to change the type here to string | Buffer instead of just string. That way the resolver could decode the data url and return it. https://github.com/parcel-bundler/parcel/blob/v2/packages/core/types/index.js#L1519

[captbaritone]

I think it should be possible with a resolver plugin already, but we might need to change the type here to string | Buffer instead of just string. That way the resolver could decode the data url and return it. https://github.com/parcel-bundler/parcel/blob/v2/packages/core/types/index.js#L1519

I decided to give this a try, and if I return code as a Buffer, Parcel throws an error here:

parcel/packages/core/core/src/summarizeRequest.js

Line 59 in 2172672

hash = hashString(code);

With a rather unhelpful error message:

Additionally, it looks like I have to supply a filePath in order for the module to resolve, and I'm not sure what I should use for a file that does not exist on disk.

[devongovett]

Yeah we'd need to change the implementation to accept buffers as a return value from a resolver instead of just strings. The filePath is required mainly for code which might have dependencies (e.g. imports) so we know where to resolve them from. That's not really the case for images I guess but probably a lot of things depend on it being there...