More generic inliner for other asset types (css, js, img): collaboration?

[marko-knoebl]

I've recently created a tiny generic rehype inliner that handles svg, images, css and js:

https://github.com/marko-knoebl/rehype-inline

I'm not sure if any collaboration really makes that much sense as these two are either small or tiny projects. But I just wanted to share that the other project exists and maybe there would be some interest. The main motivation for my project was to create single HTML files that can be downloaded (so network efficiency was not really a concern I wanted to solve).

[JamesMessinger]

Hi! Thanks for letting me know about your plugin. We have a few small projects where I work that could definitely use your plugin to create single-page HTML files. I'll let my coworkers know about it.

It looks like your plugin handles .svg images by simply replacing the <img> element with the contents of the .svg file. I initially tried the same technique for my plugin, but it turns out that doesn't work for many .svg images. There are several SVG attributes that produce drastically different results when used inside a .svg file versus an inline <svg> element. This is especially the case with optimized SVGs, since svgo assumes that it's optimizing an .svg file, not an inline <svg> element. I ended up having to write several tests to handle various edge cases like that.

Since your plugin isn't focused on inlining rather than optimization, I think a better approach might be to convert all <img> elements (even .jpg, .png, .gif, etc.) into data URIs instead. Data URIs work in all browsers and with all file types (even .svg), and they don't suffer from the weird inline <svg> behavior I mentioned above, because the browser still treats them as though they were external files. The downside of Data URIs is that they tend to be large and ugly, but for your use case that's no big deal. The most important thing is that everything gets inlined into a single file.

I found a few existing projects that use the data URI technique, but none for Rehype:

• https://github.com/maxogden/inline-images
• https://www.npmjs.com/package/html-base64-image
• https://github.com/jkphl/node-iconizr
• https://github.com/makestatic/compiler

[marko-knoebl]

@JamesMessinger thanks for the detailed input!

Based on your suggestion I've already made inlined base64 svgs the default.

I think I'm mostly done working on my generic inliner for now. But if I end up extending it some more I may rebase it on your existing inliner. But for now I suggest closing this issue again and I'll give you a heads up if there's any news on my side.

Thanks again,
Marko

[JamesMessinger]

Happy to help, @marko-knoebl !