PostCSS piping error

I have the following code in my template

{{ $cssanimations := resources.Get "css/cssanim.css" }}
{{ $cssanimations = $cssanimations | resources.PostCSS | minify | fingerprint }}

But when I try to run the site with hugo server, I get the following error.

Error: Error building site: POSTCSS: failed to transform "css/cssanim.css" (text/css): (node:1480) ExperimentalWarning: Readable[Symbol.asyncIterator] is an experimental feature. This feature could change at any time
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
CssSyntaxError: C:\blog\hugo blog\stdin:333:34: Missed semicolon

But there is not semicolon error. I have validated using multiple linters online and all of them are successful. Googling tells me that this might be connected to some issue with moment.js but I don’t use that anywhere in my project either!
Any idea what is causing this? Thanks for help :slight_smile:

That is a PostCSS error. You need to ask at the relevant support channels.

This forum is meant only for Hugo support. Hugo Extended is bundled with PostCSS but we just can’t offer support for that library here.

1 Like

It is a postcss error :wink: but Hugo has quite unhelpful followup errors. You do not have post css configured so it fails and delivers an empty javascript file (or none) which then again irritates Hugo.

Add cssnano, pixrem and autocomplete to your setup and postcss is happy. Hugo probably too.

Depending on your system something like this

npm install autoprefixer cssnano pixrem

and then in postcss.config.js:

module.exports = {
  'plugins': {
    'autoprefixer': {
      'flexbox': true
    },
    'pixrem': {},
    'cssnano': {
      'preset': 'default'
    }
  }
}

There are plenty of plugins with useful tasks.

cssnano minifies css, autoprefixer adds properties for browser-vendors to everything (like -moz-something) so you can code without thinking about all special cases and pixrem converts all sizing from px to rem for a more responsive web.

2 Likes

Thank you so much for the detailed explanation!
I have installed all that is needed, but I’m still getting some errors so I will check out a javascript forum for further help :slight_smile:

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