Using resources.PostProcess and resources.Fingerprint together?

support
1

So I’m trying to use resources.PostProcess/PostCSS to purge unused styles from the stylesheet. However I also wanted to implement sub-resource integrity, which requires the generating a checksum (through resources.Fingerprint) of the final stylesheet. This does not work and generates and error, and thinking about this it makes sense - it can’t fingerprint something that won’t be finished until after the main build!

Am I missing something here? Is there a workaround I could use to have both PostProcess and SRI implemented on a site? Or is it not currently possible with how PostProcess works in Hugo?

Here is a simplified example of the problematic code:

{{ $css := resources.Get "css/style.css" | resources.PostCSS | minify | resources.PostProcess }}
{{ $cssFingerprint := $css | resources.Fingerprint }} 
<link href="{{ $css.RelPermalink }}" integrity="{{ $cssFingerprint.Data.Integrity }}" rel="stylesheet"  />

Which will generate an error:

error calling Fingerprint: *postpub.PostPublishResource can not be transformed
2

You need to make sure the PostProcess is last in the chain.

3

Hmm, looking at my actual code PostProcess is definitely last in the chain. (Though is only executed in production mode.) Tried piping resources.Fingerprint to PostProcess as well but it still results in the same error.

For completeness here is the “real” block of code I was trying to use:

	{{ $css := resources.Get "css/style.scss" | resources.ToCSS (dict "outputStyle" "compressed") | resources.PostCSS }}
	{{ if hugo.IsProduction }}
	{{ $css = $css | minify | resources.PostProcess }}
	{{ end }}
	{{ $cssFingerprint := $css | resources.Fingerprint | resources.PostProcess }} 
	<link href="{{ $css.RelPermalink }}" integrity="{{ $cssFingerprint.Data.Integrity }}" rel="stylesheet" />
4

Your template code confuses me … so I guess it’s also confuses how I implemented PostProcess.

{{ $css := resources.Get "css/style.scss" | resources.ToCSS (dict "outputStyle" "compressed") }}
{{ if hugo.IsProduction }}
{{ $css = $css | minify | fingerprint | resources.PostProcess }}
{{ end }}
<link href="{{ $css.RelPermalink }} {{ if hugo.IsProduction }} integrity="{{ $css.Data.Integrity }}" {{ end}}rel="stylesheet" />

The above isn’t exacly the same as you had, but is what I would prefer. Two comments:

  • I don’t think “double” post processing works that well.
  • Also, there is an open issue about post processing with fast render mode (the default), which makes me prefer doing that for the production build only.
1 Like
5

Bingo, that works! I guess I was overthinking it. Thanks @bep! :slight_smile:

P.s. the double PostProcess was my attempt at getting round the issue - isn’t needed.

1 Like
6

Do you mean, double post processing for each css ?
Or double processing in the whole build process ?

At the moment I have several separate ccs and each has his own post-processing.
May be I have to change my logic for postprocess

7

I Mean the first

1 Like
8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.