PostProcess inserts Gibberish into body

support
1

Hello!

I’ve tried adding purgeCSS to Hugo like below:


const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    './hugo_stats.json', 
    './**/*.js'   
  ],
  defaultExtractor: content => {
    try {
      const els = JSON.parse(content).htmlElements;
      return [
        ...(els.tags || []),
        ...(els.classes || []),
        ...(els.ids || []),
      ];
    } catch (e) {
      return content.match(/[\w-/:]+(?<!:)/g) || []
    }
  },
  safelist: []
});

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-preset-env')({
      stage: 1,
      browsers: 'last 2 versions'
    }),
    purgecss
  ]
};

I added postProcess like below to my css imports:

    {{- with . | css.PostCSS | minify | fingerprint | resources.PostProcess }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{- end }}

This PostProcess will now break my js.Batch imports on production builds and insert
”__hdeferred/21f9aae9d7ce7760_d265aed699f7409ac0ec6fe07ee9cb11__d=” directly below my body element as a text node.

{{- $group := .group | default "batch" }}
{{- $batchName := .batchName | default "js/corebatch" }}
{{- $data := dict "group" $group "batchName" $batchName }}
{{ with (templates.Defer (dict "key" $group "data" $data )) }}
{{- $group := .group -}}
{{ with (js.Batch .batchName) }}
    {{ with .Build }}
      {{ with index .Groups $group }}
        {{ range . }}
          {{ $s := . }}
          {{ if eq $s.MediaType.SubType "css" }}
            {{ if hugo.IsDevelopment }}
              <link rel="stylesheet" href="{{ .RelPermalink }}" />
            {{ else }}
              {{ with . | fingerprint | postCSS }}
                <link
                  rel="stylesheet"
                  href="{{ .RelPermalink }}"
                  integrity="{{ .Data.Integrity }}"
                  crossorigin="anonymous" />
              {{ end }}
            {{ end }}
          {{ else }}
            {{ if hugo.IsDevelopment }}
              <script src="{{ $s.RelPermalink }}" type="module"></script>
            {{ else }}
              {{ with . | fingerprint }}
                <script
                  src="{{ $s.RelPermalink }}"
                  type="module"
                  integrity="{{ .Data.Integrity }}"
                  crossorigin="anonymous"></script>
              {{ end }}
            {{ end }}
          {{ end }}
        {{ end }}
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}

I’ve tried removing the postProcess but then purgecss removes css inserted from javascript from the frontend. But then the gibberish gone.

Any idea what this might be about?

2

There are some known limitations to PostProcess, but instead of fighting them I suggest you replace any post process with:

Conceptually the same, but without the above unmentioned limitations and much easier to reason about.

1 Like
3

I might not have time to check if it works at the moment. But thanks for the information! Hopefully I can check down-the-line and get back to you.