Essentially for historic reasons (this was how I used to build my static sites before I migrated all of them to Hugo) I’m still using Codekit to compile my Sass files to CSS. As part of this process both purgecss and CSSO (a very efficient minifier) are applied, in sequence, by Codekit, and the result compiled by Codekit at main.css is a pretty tiny css file (about 7kb).
Also for historic reasons, I previously used Grunt to subsequently concatenate (Codekit doesn’t do concatenation out of the box) normalize.css with the main.css file compiled by Codekit, and the resulting single css file would then referenced in the site’s head.
Since Hugo does concatenation, I’ve now removed Grunt from the above workflow and generate my css — from the main.css file still compiled by Codekit — using the following code, which takes care of the concatenation, minification and fingerprinting/cache-busting:
{{ $reset := resources.Get "css/normalize.css" }}
{{ $main := resources.Get "css/main.css" }}
{{ $styles := slice $reset $main | resources.Concat "css/styles.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" />
{{ end }}
I’d like to take this process to its logical conclusion and use Hugo Pipes for all the workflow described above, removing the need to keep Codekit running while I’m working on the local site. This means installing the postCSS packages for purgeCSS and CSSO and referencing both of them, consecutively, in postcss.config.js, as follows:
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: [],
});
module.exports = {
plugins: [
...(process.env.HUGO_ENVIRONMENT === "production" ? [purgecss] : []),
],
};
import csso from 'postcss-csso';
export const plugins = [
csso({
restructure: false
})
];
The code I’m trying to use in the head to reproduce the workflow without the Codekit SASS/purgeCSS/CSSO part looks as follows:
{{ $reset := resources.Get "css/normalize.css" }}
{{ with resources.Get "scss/main.scss" | toCSS | postCSS }}
{{ $main := resources.Get "css/main.css" }}
{{ $styles := slice $reset $main | resources.Concat "css/styles.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" />
{{ end }}
My question is, inter alia (there probably are other mistakes in the above setup, both the postcss.config.js files and the stylesheet referenced in the head) whether I should reference {{ with resources.Get "scss/main.scss" | toCSS | postCSS }}, or replace postCSS by resources.PostCSS, which is what purgeCSS suggests on this page. I basically don’t understand the difference between those two parameters.
Any suggestions would be gratefully received.
