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

support
1

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?

2

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.
3

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?

4

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