[hakyll] Inlining CSS

[Martin Hilscher]

Hi everybody,

I currently optimizing my site for faster loading, part of that is to
inline the css styles. So instead of having a <style src="path-to-file"/>
loading another file, I have a <style> *all css here* </style> at the
beginning of every html file.

I don't want to use an external tool to generate the css (from scss) then
copy that files content into a partial and then run site build. This seems
to error prone. So I added a field $css$ as follows and added it to the
context of the template that generates the head of the html files.

field "css" (\_ -> return . itemBody =<< withItemBody (unixFilter "sass"
["-I", ".", "--no-cache", "--scss", "--compass", "--style", "compressed"])
=<< load "css/style.scss"),


This works perfectly but, calls the sass process for every file that is
generated. Obviously the scss files won't change in between two files
during the build process of the site.

So here is my question: Do you see any better way of doing this? Especially
not calling sass for every file.

Best regards,

Martin


P.S.: Should you like to have a look at the full code
https://github.com/xinitrc/xinitrc.de

[Kyle Marek-Spartz]

Post by Martin Hilscher
Hi everybody,
I currently optimizing my site for faster loading, part of that is to
inline the css styles. So instead of having a <style src="path-to-file"/>
loading another file, I have a <style> *all css here* </style> at the
beginning of every html file.

Neat! I've done the same:

http://kyle.marek-spartz.org/posts/2014-12-09-hakyll-css-template-compiler.html

I go back and forth on whether this is actually faster, overall. To a
certain extent, it makes sense to put all content that gets duplicated
across pages into it's own file so that HTTP caching can cache it
appropriately. The initial page load will be higher and require two requests,
but each subsequent page load (of different pages on the site) will be
lower since those pages don't need to include the css and the css is
cached by the browser.

Post by Martin Hilscher
I don't want to use an external tool to generate the css (from scss) then
copy that files content into a partial and then run site build. This seems
to error prone. So I added a field $css$ as follows and added it to the
context of the template that generates the head of the html files.
field "css" (\_ -> return . itemBody =<< withItemBody (unixFilter "sass"
["-I", ".", "--no-cache", "--scss", "--compass", "--style", "compressed"])
=<< load "css/style.scss"),
This works perfectly but, calls the sass process for every file that is
generated. Obviously the scss files won't change in between two files
during the build process of the site.
So here is my question: Do you see any better way of doing this? Especially
not calling sass for every file.

I see you're passing a --no-cache to sass, would removing that flag
allow sass to cache appropriately? It still would be called each time,
but hopefully it would return quicker.

Post by Martin Hilscher
Best regards,
Martin
P.S.: Should you like to have a look at the full code
https://github.com/xinitrc/xinitrc.de

--
Kyle Marek-Spartz