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

support
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