Does it make sense to use `partialCached` on a partial that does `resources.PostProcess`

I am just confused and wanted to understand why Hugo is behaving in this way.

Let’s say we have a CSS builder partial which does resources.PostProcess on the CSS file it is fed. If I call that partial with partialCached, then my HTML is injected with a placeholder URL for the CSS, rather than the actual URL. Is this an expected behaviour?

Your post does not give enough information as to tell why it behaves the way it does, but in general:

  • The resources.PostProcess is already cached, so double caching it does not make it faster.
  • There are some known limitations so resources.PostProcess (you may have stumbled upon one), so if removing the cache, then I suggest you do it.
  • We have a proposal about a new defer template keyword that would solve all of this, but it’s non-trivial to implement and have not been on my priority list.

Thanks for the clarification. I just created a minimal reproducible example here, which you may see:

What I would like to ask is, is it a bug that PostProcess is not working with partialCached or shall this combination be avoided?

This works fine when you run hugo (i.e., production environment):

layouts/_default/baseof.html

<head>
  {{ partial "head.html" . }} 
</head>

layouts/partials/head.html

{{ partialCached "head/css.html" . }}   #### CACHED
layouts/partials/head/css.html
{{- $opts := dict "transpiler" "dartsass" "vars" $vars "targetPath" "css/main.css" "enableSourceMap" (not hugo.IsProduction) }}
{{- $css := resources.Get "sass/main.scss" | toCSS $opts }}
{{- if hugo.IsProduction }}
  {{- $css = $css | postCSS | minify | fingerprint | resources.PostProcess }}
  <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">
{{- else }}
  <link rel="stylesheet" href="{{ $css.RelPermalink }}">
{{- end -}}

postcss.config.js
const autoprefixer = require('autoprefixer');
const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./hugo_stats.json'],
  defaultExtractor: content => {
    const els = JSON.parse(content).htmlElements;
    return [
      ...(els.tags || []),
      ...(els.classes || []),
      ...(els.ids || []),
    ];
  },
  safelist: {
  deep: [/.*tippy.*/, /^sup/]
  }
});

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

Note that postCSS is only invoked in a production environment (i.e., when you run hugo). You cannot currently use resources.PostProcess with partialCached when running hugo server. If you do, you’ll see placeholders. For example:

<link rel="stylesheet" href="__h_pp_l1_1_RelPermalink__e=" integrity="__h_pp_l1_1_Data.Integrity__e=" crossorigin="anonymous">

Related:

1 Like