Import of prism plugins is broken

[0xFelix]

I get the following error after running through the steps in the README.md to setup a new site

hugo v0.123.3-a75a659f6fc0cb3a52b2b2ba666a81f79a459376+extended linux/amd64 BuildDate=2024-02-23T17:09:20Z VendorInfo=gohugoio

ERROR POSTCSS: failed to transform "css/non-critical.css" (text/css): CssSyntaxError: postcss-import: /var/home/felix/example.com/stdin:11:5: Failed to find '/prismjs/plugins/toolbar/prism-toolbar.css'
  in [
    /var/home/felix/example.com,
    /var/home/felix/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/schnerring/hugo-theme-gruvbox@v0.0.0-20240223094931-9dba7c775b7a/assets/css
  ]

   9 |
  10 |     /*/prismjs/plugins/toolbar/prism-toolbar.css*/
> 11 |     @import "/prismjs/plugins/toolbar/prism-toolbar.css";
     |     ^
  12 |
  13 |
Built in 2799 ms
Error: error building site: POSTCSS: failed to transform "css/non-critical.css" (text/css): CssSyntaxError: postcss-import: /var/home/felix/example.com/stdin:11:5: Failed to find '/prismjs/plugins/toolbar/prism-toolbar.css'
  in [
    /var/home/felix/example.com,
    /var/home/felix/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/schnerring/hugo-theme-gruvbox@v0.0.0-20240223094931-9dba7c775b7a/assets/css
  ]

   9 |
  10 |     /*/prismjs/plugins/toolbar/prism-toolbar.css*/
> 11 |     @import "/prismjs/plugins/toolbar/prism-toolbar.css";
     |     ^
  12 |
  13 |

It looks like the imports of Prism plugins in non-critial/00-vendor.css is broken because a slash is prepended to the imports.

https://github.com/schnerring/hugo-theme-gruvbox/blob/9dba7c775b7a0b377ea3e4826cf005406c118391/assets/css/non-critical/00-vendor.css#L9

When exchanging this with the following the build works again:

  {{ printf "/*%s*/" $path }}
    @import "{{ $path }}";
  {{ end }}

What I noticed:

$path == prismjs/plugins/toolbar/prism-toolbar.css
$plugin == /prismjs/plugins/toolbar/prism-toolbar.css (RelPermalink prepends a slash?)

[Iwert-m]

Hi Felix

I am experiencing the same problem. It appears that the extra "/" is prepended by hugo versions 0.123.0 and higher.

A quick fix for the meanwhile is to pin the hugo version to 0.122.0.

[itsrobel]

I removed the import lines and the syntax highlighting persisted, what does the 00-vendor.css do ?

[0xFelix]

It imports the CSS files required for Prism plugins. I expect your Prism plugin configuration to be broken if you leave out the required imports.

[schnerring]

So is this a Hugo bug or intended behavior? I have looked through the 0.123.x Hugo release notes, but couldn't identify the change introducing this behavior.

[Valhrafnaz]

This bug is happening to me as well, with a very strange caveat. For whatever reason, using the correct baseURL for my site, which lives in a sub-directory [url]/blog, causes hugo to attempt to find the prismjs files in blog/prismjs, which seems bizarre. Not really sure how to fix that.