Inlining Critical Path CSS with Hugo Pipes

tips & tricks
1

Using Hugo Pipes introduced in 0.43 we can now inline critical-path css and minify it in production.

{{ $vendor := resources.Get "css/critical-vendor.css" }}
{{ $theme := resources.Get "css/critical-theme.css" }}
{{ $custom := resources.Get "css/critical-custom.css" }}
<style>
  {{- if .Site.IsServer -}}
    {{ (slice $vendor $theme $custom | resources.Concat "").Content | safeCSS }}
  {{- else -}}
    {{ (slice $vendor $theme $custom | resources.Concat "styles.css" | minify).Content | safeCSS }}
  {{- end -}}
</style>

This could be improved by allowing Concat to work in pipes like:

{{ (slice $vendor $theme $custom | concat | minify).Content | safeCSS }}
2 Likes
2

Riffing off the above I was able to land a feature which allows users to change between theme variations by making slight modifications in their site’s config.toml. I’d been holding off on this as I don’t use Gulp, Grunt, Webpack, StealJS, etc… and didn’t want to bloat the critical path css inlined into the page. Good stuff!