Inline Style assets in HTML

[iamandrewluca]

Is your feature request related to a problem? Please describe. Google Lighthouse reports direct loaded CSS as a blocking asset on most websites.

Describe the solution you'd like Google Lighthouse recommends to inline critical CSS in HTML

Describe alternatives you've considered Tried to use vite-plugin-singlefile plugin for Vite, but it throws an error

iles.config.ts

The Error

Additional context https://github.com/vitejs/vite/issues/621 https://github.com/richardtallent/vite-plugin-singlefile

[ElMassimo]

vite-plugin-singlefile was designed for SPAs, where there's a single index.html file.

I'd recommend experimenting with a custom îles module that uses critters to inline the stylesheets using the ssg.beforePageRender hook.

You could use this logic as a starting point.

[iamandrewluca]

@ElMassimo 🤣 2 lines of code Carl, 2 lines. It worked from the first try 😀 Thanks!

https://github.com/iamandrewluca/iamandrewluca.github.io/commit/6c922fc5185e86325dfaf2fde7a16bc1ac797c34

[ElMassimo]

Glad that it worked, thanks for sharing! 😃

I think it would be useful to write a blog post about creating modules for îles.

[iamandrewluca]

I gave up on writing blog posts, it takes a lot of time. But here is a video 😀

https://youtu.be/Vu3LMe1RdfM

[ElMassimo]

Haha, great! But to clarify, I was thinking out loud, I should write that post and add it to the docs 😄