Update Hugo example for v7

[markdumay]

Is your feature request related to a problem? Please describe. The Hugo guide provides a clear example of how to use PurgeCSS with Hugo. However, the example is no longer compatible with v7.0.2, which introduced a breaking change in how to import the module.

Describe the solution you'd like Update the Hugo example to be compatible with PurgeCSS v7.

Describe alternatives you've considered I've tried to update the module configuration myself, but I was struggling to get it to work with Hugo. Any help is much appreciated.

Additional context N/A

[stalsma]

This worked for me

const purgeImport = require('@fullhuman/postcss-purgecss');
const purgeCSSPlugin = purgeImport.purgeCSSPlugin || purgeImport.default || purgeImport;


const purgecss = purgeCSSPlugin({
  content: ['**/*.html',
    '../public/**/*.html'],
  autoprefixer: {},
  cssnano: {preset: 'default'},
  safelist: safelist
});

module.exports = {
  plugins: [
    ...(process.env.HUGO_ENVIRONMENT === "cloudcannon" ? [] : [purgecss]),
  ],
};

[markdumay]

Thanks for your help @stalsma! Looking at your example, I had to update the following lines in my original postcss.config.js file:

Old import statement:

const purgecss = require('@fullhuman/postcss-purgecss')({
// continue with import

New import statement:

const purgeImport = require('@fullhuman/postcss-purgecss')
const purgeCSSPlugin = purgeImport.purgeCSSPlugin || purgeImport.default || purgeImport
const purgecss = purgeCSSPlugin({
// continue with import

PurgeCSS v7 now works as expected with Hugo.

[coliff]

Hi @markdumay - I'm also having trouble getting PurgeCSS v7 to run with Hugo.

Do you have a complete working example of your postcss.config.js - including Autoprefixer you could kindly share please?

My current config (which works with v6, but not v7) is this:

module.exports = {
  plugins: {
    '@fullhuman/postcss-purgecss': {
      content: [
        './content/*.md',
        './layouts/**/*.html',
      ],
      keyframes: false,
    },
    autoprefixer: {},
  },
};

[markdumay]

Sure! You might want to take a look at the implementation for my Hinode theme:

https://github.com/gethinode/hinode/blob/main/config/postcss.config.js

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days.