POSTCSS transform error

support
1

Preprocessor for vendor specific css not working on windows 10.

POSTCSS: failed to transform "styles.css" (text/css): resource "css/styles.css_674d3a8c056e8697f10ad004211806b8" not found in file cache
  1. Installed postcss and autoprefixer (and added to path)
npm install -g postcss-cli
npm install -g autoprefixer
  1. added postcss.config.js to root
module.exports = {
	plugins: {
		autoprefixer: {
			browsers: [
                "Android 2.3",
                "Android >= 4",
                "Chrome >= 20",
                "Firefox >= 24",
                "Explorer >= 8",
                "iOS >= 6",
                "Opera >= 12",
                "last 2 versions",
                "Safari >= 6"
                ]
		}
	},
}
  1. testing out postCSS (on extended most recent version) in the hugo code causes error
{{ $styles := resources.Get "styles.css" | postCSS}}
{{ $syntax := resources.Get "syntax.css" }}
 {{ $stylesCustom := resources.Get "stylesCustom.css"  }}
{{ $styles = slice $styles $syntax $stylesCustom | resources.Concat "css/bundle.css" | minify |fingerprint }}

<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}"  />
  1. Checked binary locations

“We look for the postcss binary in 1) node_modules/postcss-cli/bin/ or 2) PATH…If not found we fall back to cached resources (if found)” - Bep

Windows puts the packages here:

C:\Users-----\AppData\Roaming\npm\node_modules\postcss-cli\bin\postcss
C:\Users-----\AppData\Roaming\npm\node_modules\autoprefixer\bin\autoprefixer

Hugo still looks in the cache, which is empty. On that note, configured cache in config here: and there’s not yet any bundles in there.

resourceDir = "/resources/"
[caches]
[caches.assets]
dir = ":resourceDir/_gen"
maxAge = "10s"

Windows thing, or is this missing something? (Also, is this cache config handled properly?)
Thanks

2

I had the same issue, which made me find this post. Although my setup is not the same as yours, as I am using Docker to run and build with Hugo…

When I didn’t install postcss-cli and autoprefixer globally, but had them in the projects node_modules, Hugo cannot properly process postCSS and throws the mentioned error.

So, the error is not just a Windows issue. But probably the issue of the global module cache is. But wouldn’t that make it more of a node problem?

1 Like
3

The fix for me was to bring everything npm into the project locally.

If you need to, go fully through npm scripts again. Then set up your packages.json properly. Mine is like this (with the purge at the moment):

module.exports = {
  plugins: {
      '@fullhuman/postcss-purgecss': {
          content: [
              './layouts/**/*.html',
              './assets/js/*.js',
              './static/js/*.js'
            ],
          whitelist: [
              'highlight',
              'language-bash',
              'pre',
              'video',
              'code',
              'content',
              'h3',
              'h4',
              'ul',
              'li'
          ]
      },
      autoprefixer: {},
      cssnano: {preset: 'default'}
  }
};

Finally, make sure you have all of your files in the correct directories. Put all your global css and js in assets/. Everything should work after that.

You can do something like this in your head

{{- $sassMain := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sassMain.scss" . -}}

{{- $sassIncludes := (slice "assets/sass-includes/" "node_modules") -}}
<!-- options based on production variable ------------------------------------>
{{- $sassOpts := dict "targetPath" "css/main.css" "includePaths" $sassIncludes -}}
{{- if (in (slice (getenv "HUGO_ENV") hugo.Environment) "production") -}}
{{- $sassOpts = merge $sassOpts (dict "outputStyle" "compressed" "enableSourceMap" true) -}}
{{end}}

{{- $sassBundle := slice $sassMain | resources.Concat "sass/sassBundle.scss" | resources.ExecuteAsTemplate "sass/sassBundleParsed.scss" . | toCSS $sassOpts -}}

{{- if (eq (getenv "HUGO_ENV") "production") -}}
{{- $mainBundle = $mainBundle | postCSS | minify | fingerprint "sha512" -}}
{{end}}
<link rel="stylesheet" href="{{- $mainBundle.RelPermalink -}}" integrity="{{- $mainBundle.Data.Integrity -}}"/>
4

I just ran into the same problem. I did a failed upgrade to Tailwind 3, and when I downgraded this happened. I reinstalle postcss-cli and autoprefixer both on the site & in the theme.