Difference between postCSS and resources.PostCSS

support
,
6

This reply was amended to reflect the fact the code—after taking into account jmooring’s remarks in his comment above—now works in development and production mode if CSSO is left out of postcss.config.js.

I’m updating this topic as I’ve changed the attempted setup from the one described above, which contained several errors, and while I can now get the build to work, using the revised code below, in development mode, it’s still throwing errors in production when I add CSSO to the postcss.config.js file. It would appear, in essence, that while the code referenced below for the stylesheet is working, errors in postcss.config.js are causing the production build to fail if I try to include CSSO in it.

I. New code

1. stylesheet

This integrates dart-sass, since Hugo, which uses libsass by default, was breaking modern CSS in SCSS, which I occasionally use, such as:

background-color: hsl(var(--my-purple-hsl) / 50%) ;

Using the dart transpiler, and testing that it works properly is explained very clearly here.

{{ $reset := resources.Get "css/normalize.css" }}
{{ $sass := resources.Get "sass/main.scss" }}
{{ $opts := dict "transpiler" "dartsass" "targetPath" "css/main.css" }}
{{ $main := $sass | toCSS $opts }}
{{ $css := resources.Get "css/main.css" }}
{{ $styles := slice $reset $css | resources.Concat "css/styles.css" }}
{{ if hugo.IsProduction }}
{{ $styles = $styles | postCSS | minify | fingerprint }}
{{ end }}
<link
  rel="stylesheet"
  href="{{ $styles.RelPermalink }}"
  {{ if hugo.IsProduction -}}
    integrity="{{ $styles.Data.Integrity }}"
  {{- end }}
/>

2. postcss.config.js

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] : []),
  ],
};

Comment: this essentially returns the postCSS configuration to the one suggested here. The reason for this is that I decided, for the moment, to get the postCSS to work with just purgeCSS, omitting CSSO, because attempting to add CSSO caused an error which I haven’t been able to correct, asking me to either add the following to my package.json file:

{
  "type": "module",
}

or to rename the referenced .js file to .mjs.

Yet adding this, or renaming the csso.js in my node_modules to csso.mjs which is the alternative solution suggested, continued to cause errors. So for the sake of attempting to solve the issues sequentially, rather than all at once, I’ve deferred the inclusion of CSSO until I’ve got purgeCSS to work.

II. Testing the new code

The above setup works in development mode and also in production mode, but sadly I’ve been unable to add CSSO back into the build process.

My deleted postcss.config.js, which additionally included the code to invoke CSSO recommended here, and which I have now replaced by the one listed above which references purgeCS only, was previously 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
    })
];

Comment: this referenced both purgeCSS and CSSO. The code referenced at the beginning of this edit at (1) and (2) removes the reference to CSSO. when I try to revert to this version of postcss.config.js, even if I add "type": "module" to my package.json, the build fails

I’d be most grateful if someone could suggest a way of adding CSSO to postcss.config.js, using the method suggested here, and make it work.