Different results in `hugo_stats.json` when `hugo --gc` or `netlify build`

support
1

Hello,

I have installed postCSS + @fullhuman/postcss-purgecss in my hugo site.
And I see different results in hugo_stats.json when i use:

  • hugo --gc locally
  • netlify build locally

I checked and the HTML source code is exactly the same with both commands (ie. the missing classes removed from hugo_stats.json are present in the html)

Here is some example of difference and missing classes in generated hugo_stats.json.

Strangely the web site behaviour seem not affected :grinning: Any idea or explanation ?

   "htmlElements": {
     "tags": [

+      "!--",
-      "0?\"-\":\"\",i=parseint(n=math.abs(+n||0).tofixed(c))+\"\",j=(j=i.length)",

      "iframe",
+      "iframe\n",
      "img",
+      "img\n",

-       "results.length;i++){writer.tag(results[i],'');}}\u003c/script",

-      "btn-main-tel-hero",

File : package.json 

 "dependencies": {
    "@fullhuman/postcss-purgecss": "^2.3.0",
    "autoprefixer": "^9.8.6",
    "postcss-cli": "^7.1.1"
  },

File : postcss.config.js 

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

partial

I use this code for all my requested css.

{{- $isProd := hugo.IsProduction -}}

{{- $css := resources.Get "css/themefisher-font/style.css"}}
<!-- Utilise PurgeCSS -->
{{- $css = $css | resources.PostCSS (dict "config" "./postcss.config.js") }}
{{- if $isProd }}
{{- $css = $css | minify | fingerprint "sha384" }}
{{- end }}
<link rel="preload" href="{{ $css.RelPermalink }}" {{ if $isProd }}integrity="{{ $css.Data.Integrity }}"{{ end }} as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link href="{{ $css.RelPermalink }}" {{ if $isProd }}integrity="{{ $css.Data.Integrity }}"{{ end }} rel="stylesheet" type="text/css"></noscript>

File : netlify.toml 

[build]
publish = "public"
command = "hugo --minify"

[context.production.environment]
HUGO_VERSION = "0.74.3"
HUGO_ENV = "production"
RUBY_VERSION = "2.6.2"
HUGO_ENABLEGITINFO = "true"
TZ = "Europe/Zurich"
NODE_VERSION = "12.2.0"

[context.deploy-preview]
command = "hugo --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.74.3"
RUBY_VERSION = "2.6.2"
HUGO_ENABLEGITINFO = "true"
TZ = "Europe/Zurich"
NODE_VERSION = "12.2.0"

[context.branch-deploy]
command = "hugo -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.74.3"
RUBY_VERSION = "2.6.2"
HUGO_ENABLEGITINFO = "true"
TZ = "Europe/Zurich"
NODE_VERSION = "12.2.0"
2

Unless I’m misunderstanding something, it looks like you are pruning the CSS every time a page is rendered, instead of waiting until all of the pages have been rendered. Which doesn’t make any sense to me.

The PostProcess documentation has an example of using PostCSS on every page (e.g., autoprefix), and then PostProcess (e.g., purgecss) once the site is completely built.

I’m not sure what effect this ultimately has on the contents of hugo_stats.json.

3

Ahh. Thanks for clearing this PostProcess doc.

For people like me (absolute noob in the node/tailwind/postcss) this is first time I read something clear about those 2 tools. Docs are numerous but they always think that reader is uptodate in those dept. Not my case !

So After your clear explanation, I removed autoprefix dependencies and usage in package.json.

Benefit : Faster build. But same result.

But I also have something strange with some resources going back and forth between “hugo” and “netlify build”. Wich is not normal. So I guess this is where I have to investigate.

But thanks for the explanation.