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

support
4

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 :smiley:

thanks for replies @elperronegro @h-enk

5 Likes