How I can implement Purgecss, Uncss, or PurifyCSS in Hugo?

[jjdanilohugo]

Does anyone know how I can implement Purgecss, Uncss, or PurifyCSS in Hugo?
I tried several ways and I couldn’t, the closest I could get reduced about 5 CSS rules.

I followed the model of this tutorial:

Hugo CSS concat, minify and purgecss using postcss

My structure is like this:

Partial Head

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index,follow">
<meta name="title" content="{{.Title}} - {{ .Site.Title }}">
<meta name="description" content="{{ with .Params.metadescription }}{{ . }}{{ end }}">
<title>
    {{- block "title" . -}}
    {{ .Title}}{{ if ne .Title .Site.Title }} | {{ .Site.Title }}{{ end }}
    {{- end -}}
</title>
{{ $css_options := dict "targetPath" "css/main.css" }}

{{- if (in (slice (getenv "HUGO_ENV") hugo.Environment) "production") -}}
  {{- $css_options = merge $css_options (dict "outputStyle" "compressed") -}}
{{- end -}}

{{ $sass_template := resources.Get "scss/main.scss" }}
{{ $style := $sass_template | resources.ExecuteAsTemplate "main_parsed.scss" . | toCSS $css_options }}

{{- if (eq (getenv "HUGO_ENV") "production") -}}
  {{- $style = $style | postCSS | minify | fingerprint "md5" -}}
{{- end -}}

<link rel="stylesheet" href="{{ $style.RelPermalink }}">

postcss.config.js (in theme folder)

module.exports = {
plugins: {
‘@fullhuman/postcss-purgecss’: {
content: [
‘themes/hugo-simple-theme-master/layouts//.html’,
'themes/hugo-simple-theme-master/assets/js/.js’,
‘themes/hugo-simple-theme-master/static/js/*.js’,
'/layouts//.html’,
'/static/js/.js’,
],
whitelist: [
‘highlight’,
‘language-bash’,
‘pre’,
‘video’,
‘code’,
]
},
autoprefixer: {},
cssnano: {preset: ‘default’}
}
};

postcss.config.js (in theme folder)

module.exports = {
plugins: {
‘@fullhuman/postcss-purgecss’: {
content: [
‘themes/hugo-simple-theme-master/layouts//.html’,
'themes/hugo-simple-theme-master/assets/js/.js’,
‘themes/hugo-simple-theme-master/static/js/*.js’,
'/layouts//.html’,
'/static/js/.js’,
],
whitelist: [
‘highlight’,
‘language-bash’,
‘pre’,
‘video’,
‘code’,
]
},
autoprefixer: {},
cssnano: {preset: ‘default’}
}
};

It does not give the error when executing the “hugo” command, but also does not remove the unused CSS, it just returns the same CSS

[elperronegro]

Does your postcss.config.js need *.html in the content search?

[h-enk]

Check out Hyas: https://github.com/h-enk/hyas

[jjdanilohugo]

After much research, I found a solution to the problem (it was much simpler than I thought)

First, to configure package.json, I ran the following commands in the terminal, inside the project folder, to install the necessary resources:
npm init
npm install postcss-cli autoprefixer
npm i -D @fullhuman/postcss-purgecss

I put the post.config.js in the root folder of the project (it was in the theme folder before), with the following settings:

  module.exports = {
    plugins: {
    '@fullhuman/postcss-purgecss': {
      content: ['./**/*.html', './**/*.js'],
    },
    autoprefixer: {
      browsers: [
        "last 2 versions",
        "Explorer >= 8",
      ]
    },
  }
};

And the head.html layout inside the theme folder was also much cleaner:

{{ $styles := resources.Get "scss/main.scss" | toCSS | postCSS | minify }}
    <style>
        {{- $styles.Content | safeCSS -}}
    </style>

And the result of that was:
From 1021 rules of CSS to 165 rules

thanks for replies @elperronegro @h-enk