Problem chaining toCSS and postCSS

support
1

Hi,

I have a problem when trying to call postCSS on a CSS toCSS method.

For instance:

{{ $style := $sass | toCSS | postCSS }}

produces

Error: Error building site: POSTCSS: failed to transform "css/main.css" (text/css): resource "scss/css/main.scss_832876c32a71faa43531d9a08ead6e38" not found in file cache

Both {{ $style := $sass | toCSS }} and {{ $style := $css | postCSS }} work fine (except if $css is the result of toCSS).

Am I missing something here, maybe in my configuration?
The error message makes me think it’s not related to anything I could have done, but still…

I made a minimal project reproducing this case: https://github.com/cyChop/minimal-cases-hugo/tree/bug/postcss (branch bug/postcss).

Hugo version is 0.68.3.

Thanks in advance.

2

A bad commit made it into the Hugo releases of versions 0.67.1 - 0.68.0

The commit was reverted in 0.68.1

It seems that the theme you are using generated its resources with one of the above versions.

To solve the issue, you need to regenerate the resources of the theme, with Hugo Extended v0.68.3 also you can notify the theme author to do the same and update the theme repo.

3

Hey, thank you. That’s interesting.

I actually don’t use a theme.
All the layouts are directly under the layouts directory.

I made some tests with my minimal case project (details below).
They indeed seem to indicate that version 0.67.0 works fine, but version 0.68.1 through 0.68.3 all return the same error as above.

I used hugo env to make sure I was running the correct version (not always obvious because I use the hugo-bin wrapper), and it was correct.
Does it mean another bug may have been missed because of the faulty commit?

Test details

Hugo Static Site Generator v0.68.(1|2|3)/extended windows/amd64:
ERROR 2020/03/26 19:05:41 POSTCSS: failed to transform "css/main.css" (text/css): resource "scss/css/main.scss_832876c32a71faa43531d9a08ead6e38" not found in file cache

Hugo Static Site Generator v0.67.0/extended windows/amd64:
ERROR 2020/03/26 19:07:37 Transformation failed: POSTCSS: failed to transform "css/sample.css" (text/css): resource "css/css/sample.css_674d3a8c056e8697f10ad004211806b8" not found in file cache. Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/

Hugo Static Site Generator v0.67.0/extended windows/amd64 + postcss-cli: no error

4

No idea. I only know what I’ve been told and what I saw first hand at the Hugo Themes repo when some 32 theme demos broke.

The question can only be answered by the maintainer.

cc: @bep

5

For whatever it’s worth, I had this same bug and just removed the additional pipes related to PostCSS and this seemed to fix the issue.

What I had before that threw the same file cache error:

{{ $cssOpts := (dict "targetPath" "css/style.css" ) }}
    {{ $styles := resources.Get "scss/style.scss" | toCSS $cssOpts | postCSS | minify }}
    <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">

What I have now that seems to be working when building locally:

{{ $cssOpts := (dict "targetPath" "css/style.css" ) }}
    {{ $styles := resources.Get "scss/style.scss" | toCSS $cssOpts }}
    <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
1 Like
6

I got the same error message while deploying a page to Gitlab Pages. The source of the error was my flawed config file: I had incorrectly specified the baseURL = "https://balthasar.gitlab.io" rather than
baseURL = "https://balthasars.gitlab.io/portfolio/", having forgotten the name of the repo at the end.

7

I still have the same problem in v0.74.3. Chaining {{ $style := resources.Get "styles/main.scss" | toCSS | postCSS (dict "config" "postcss.config.js" "noMap" true) | minify | fingerprint }} does not work and results in Error: Error building site: POSTCSS: failed to transform "styles/main.css" (text/css): resource "scss/styles/main.scss_e54b1a1d1983c90ad9dffb22943a47fb" not found in file cache.

Is there any way this can be fixed or any workaround? I need my to run PostCss on my scss results.

8

Please post a link to the public repository for your site. See:
https://discourse.gohugo.io/t/requesting-help/9132

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

9

Oh, I am sorry. Take a look at this commit: https://github.com/datenanfragen/website/pull/375/files#diff-0c8f747dec0e7ca5148ebe8907cfc781R36

10

Are you using netlify-plugin-hugo-cache ?

Because I encounter a similar build fail when this plugin is active on Netlify and if I use postcss-purgecss with this plugin.

Both conf alone works fine.

See details on : https://github.com/cdeleeuwe/netlify-plugin-hugo-cache-resources/issues/3

11

No, currently not. I also see this error in local builds, so I am guessing it has something to do with how hugo handles the pipes internally.

12

I don’t see postcss-cli in your dependencies, and I suspect you have not installed it globally either.

I was able to reproduce the problem by building your site from the z_hugo_pipes branch following the directions in README. Then I installed postcss-cli and was able to build the site without any problems.

See https://gohugo.io/hugo-pipes/postcss/.

Hugo Pipe’s PostCSS requires the postcss-cli JavaScript package to be installed in the environment ( npm install -g postcss-cli ) along with any PostCSS plugin(s) used (e.g., npm install -g autoprefixer ).

If you are using the Hugo Snap package, PostCSS and plugin(s) need to be installed locally within your Hugo site directory, e.g., npm install postcss-cli without the -g flag.

EDIT: This documentation is a bit unclear, perhaps implying that you must globally install postcss-cli unless you’re running the snap executable. That is not the case. I avoid global npm installs whenever possible.

1 Like
13

Unrelated with your problem, but I guess @jmooring is (as always) right.

I just (independently) solved my above problem by doing this. I guess thoses 2 pb get the same cause.

1 - Adding "postcss-cli": "^7.1.1" to my package.json.
2 - Adding NODE_VERSION = "12.2.0" to my prod section in netlify.toml (needed by postcss-cli v7.1.1)

14

Ah, my bad. Thanks a lot, with postcss-cli in my devDependencies it all works now! I agree that the documentation is unclear on that, I think that’s why I might have overlooked it.