Hugo guide added to the PurgeCSS docs

Announcements
1

Just dropping by to say a Hugo guide has been added to the PurgeCSS docs.

See: Hugo | PurgeCSS

9 Likes
2

Thank you for this! A couple questions:

  1. I’m curious if PurgeCSS will work on css that gets written directly into instead of written to a separate file. How would the template instructions change?
  2. Also, do you know how to add this process (with the install of PurgeCSS and all) to Netlify?
3

I don’t understand your question. Can you give an example of what you mean?

The Netlify build image has Node.js pre-installed. If desired, you can even set the Node.js version via your netlify.toml file. See this sample.

Then, assuming your site’s git repo has the package*.json files in the project root, you can run npm install as part of your Netlify build command. See samples here and here.

1 Like
4

I mean you can reference an external css file with which is what that tutorial assumes or you can embed the css in your html head with in which case there is no external file.

So I’m wondering if purge css with work with the approach also.

5

I see. You could tweak the template snippet to inline the CSS in your <head> like this:

{{ $css := resources.Get "css/style.css" | resources.PostCSS }}

{{ if hugo.IsProduction }}
  {{ $css = $css | minify | fingerprint | resources.PostProcess }}
{{ end }}

<style>
  {{ $css.Content | safeCSS }}
</style>
6

That makes sense. This is how my theme is doing it at the moment:

{{ $styles := slice }}
{{ range site.Params.plugins.css }}
{{ if findRE "^http" .link }}
<link crossorigin="anonymous" media="all" rel="stylesheet" href="{{ .link | relURL }}" {{.attributes | safeHTMLAttr}} >
{{ else }}
{{ $styles = $styles | append (resources.Get .link) }}
{{ end }}
{{ end }}
{{ $styles := $styles | append (resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS) }}
{{ $styles := $styles | resources.Concat "/css/style.css" | minify | fingerprint "sha512"}}
<style type="text/css">{{$styles.Content | safeCSS}}</style>

I notice that my theme doesn’t use the resources.PostCSS function. Not sure what it is honestly, I’ll have to look it up. But I imagine the PurgeCSS step happens in your resources.PostProcess step?

7

See the docs on it: PostCSS | Hugo

1 Like
8

Hi, thanks for the tutorial for PurgeCSS !

For those who want to use PurgeCSS with command line, here is my setup for Hugo in package.json in “scripts” section:

"css:purge": "hugo && purgecss --css assets/css/material.css --content public/**/*.html --output assets/css/material-purge.css --safelist class1 class2",

Then importing assets/css/material-purge.css in my header.html partial.