Remove unused CSS with purgeCSS

support
1

Hi there,

I want to use hugo pipes with purgecss to remove unused css. However, I have a problem doing so. I installed @fullhuman/postcss-purgecss and setup my postcss config to only load it on production runs. But when I try to test it, I get the following error: Error: Error building site: POSTCSS: failed to transform "css/main.min.css" (text/css): Error: [object Object] is not a PostCSS plugin

Has someone achieved to use this within hugo and can help me? I’m not sure where the error is so this might not be related to hugo at all, then I’ll try making an issue on github for the plugin itself.

Thanks in advance

2

Do you have a repository available ?

3

It’s a private repository so I can’t open it to the public, also the page is very minimal currently

This is how I call hugo pipes: {{ $css := resources.Get "sass/site/main.sass" | toCSS (dict "targetPath" "css/main.min.css" "outputStyle" "compressed") | postCSS | fingerprint }}

And this is how my postcss.config.js looks like:

module.exports = {
  plugins: [
    require('autoprefixer'),
    ...process.env.HUGO_ENVIRONMENT === 'production'
      ? [require('purgecss')]
      : []
  ]
};
4

You could take a look at the repo made by @budparr to see how he has done it:

5

Thanks, I got it to work now. I always required the wrong package which is why it didn’t work. The official hugo documentation should get updated on that matter, I’ll consider creating a PR for this, only have to look up how it works

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.