HUGO

Optimizing CSS, remove unused

Hi,

To optimize my site I am currently inlining and minifying CSS using the following code:

{{ with resources.Get "/css/tachyons-optimized.css" | minify }}
    <style amp-custom> {{ .Content | safeCSS }}  </style>
    {{ end }}

What I really want to do as well is to remove all the CSS tags that are unused in the current document.
Is there a simple way to do this?

Any advice is helpful.

I personally consider purgecss simple enough. As a plugin for postcss you can use it with Hugo Pipes.

1 Like

Can I bother your to share your configuration file?

Sure! Here’s how I did it on one of my sites:

postcss config:

Hugo Pipes:

And here’s another project by budparr that uses Hugo + purgcecss:

7 Likes

Worked beautifully! Thanks!

Great solution but how would you go about modifying it for amp pages?
Amp requires inline CSS in head tag of every page. Amp doesn’t support stylesheet link.
So custom CSS would be different for every single page. I feel this is where PurgeCSS can make huge performance improvement. Not to mention amp pages has 50Kb hard limit for custom CSS.