Description
What version of Hugo are you using (hugo version)?
hugo v0.140.2-aae02ca612a02e085c08366a9c9279f4abb39d94+extended linux/amd64 BuildDate=2024-12-30T15:01:53Z VendorInfo=snap:0.140.2
Does this issue reproduce with the latest release?
Yes.
Problem:
I'm integrating my newly created project with TailwindCSS v4. The Hugo site documentation for TailwindCSS Found here, says that I could use the npm OR the as a standalone executable of the CLI. It is currently not working as I imagined. Looking at the Hugo source code and trying to figure it out, understanding the inner workings, I found something interesting:
On the repository file hugo/resources/resource_transformers/cssjs/tailwindcss.go, line 109 executes a command with the Npx function. The function can be found here: hugo/common/hexec/exec.go. In the header of the function we have:
// Npx will in order:
// 1. Try fo find the binary in the WORKINGDIR/node_modules/.bin directory.
// 2. If not found, and npx is available, run npx --no-install <name> <args>.
// 3. Fall back to the PATH.This is a good sequence, but has a problem. I'm using the standalone CLI (or at least I want that), npx is installed in my system, because of other projects, but following this approach, it seems that the PATH fallback is never called. When I try to run hugo server --logLevel debug I get this snippet of error:
INFO tailwindcss: npm ERR! canceled
INFO tailwindcss:
INFO tailwindcss: npm
INFO tailwindcss:
INFO tailwindcss: ERR!
INFO tailwindcss: A complete log of this run can be found in:
INFO tailwindcss: npm ERR! /home/diego/snap/hugo/22151/.npm/_logs/2025-01-06T18_36_16_231Z-debug-0.log
Error: error building site: TAILWINDCSS: failed to transform "/css/main.css" (text/css): npm ERR! canceled
npm ERR! A complete log of this run can be found in:
npm ERR! /home/diego/snap/hugo/22151/.npm/_logs/2025-01-06T18_36_16_231Z-debug-0.logLooking further on the logs on /home/diego/snap/hugo/22151/.npm/_logs/2025-01-06T18_36_16_231Z-debug-0.log I have this:
0 verbose cli /snap/hugo/22151/usr/bin/node /snap/hugo/22151/usr/lib/node_modules/npm/bin/npm-cli.js
1 info using npm@8.19.4
2 info using node@v16.20.2
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:/snap/hugo/22151/usr/lib/node_modules/npm/npmrc Completed in 1ms
6 timing config:load:builtin Completed in 1ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:/home/diego/Projects/penielveiculos/penielveiculos-website/.npmrc Completed in 1ms
10 timing config:load:project Completed in 5ms
11 timing config:load:file:/home/diego/snap/hugo/22151/.npmrc Completed in 0ms
12 timing config:load:user Completed in 0ms
13 timing config:load:file:/snap/hugo/22151/usr/etc/npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 6ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 16ms
19 timing npm:load:configload Completed in 16ms
20 timing npm:load:mkdirpcache Completed in 1ms
21 timing npm:load:mkdirplogs Completed in 0ms
22 verbose title npm exec tailwindcss --input=- --cwd /home/diego/Projects/penielveiculos/penielveiculos-website --minify
23 verbose argv "exec" "--yes" "false" "--" "tailwindcss" "--input=-" "--cwd" "/home/diego/Projects/penielveiculos/penielveiculos-website" "--minify"
24 timing npm:load:setTitle Completed in 1ms
25 timing config:load:flatten Completed in 2ms
26 timing npm:load:display Completed in 2ms
27 verbose logfile logs-max:10 dir:/home/diego/snap/hugo/22151/.npm/_logs
28 verbose logfile /home/diego/snap/hugo/22151/.npm/_logs/2025-01-06T18_36_16_231Z-debug-0.log
29 timing npm:load:logFile Completed in 3ms
30 timing npm:load:timers Completed in 0ms
31 timing npm:load:configScope Completed in 0ms
32 timing npm:load Completed in 23ms
33 silly logfile start cleaning logs, removing 1 files
34 silly logfile done cleaning log files
35 timing arborist:ctor Completed in 1ms
36 http fetch GET 200 https://registry.npmjs.org/tailwindcss 476ms (cache updated)
37 timing arborist:ctor Completed in 0ms
38 timing arborist:ctor Completed in 0ms
39 timing command:exec Completed in 713ms
40 verbose stack Error: canceled
40 verbose stack at exec (/snap/hugo/22151/usr/lib/node_modules/npm/node_modules/libnpmexec/lib/index.js:230:17)
40 verbose stack at async module.exports (/snap/hugo/22151/usr/lib/node_modules/npm/lib/cli.js:78:5)
41 verbose cwd /home/diego/Projects/penielveiculos/penielveiculos-website
42 verbose Linux 5.15.167.4-microsoft-standard-WSL2
43 verbose node v16.20.2
44 verbose npm v8.19.4
45 error canceled
46 verbose exit 1
47 timing npm Completed in 820ms
48 verbose code 1
49 error A complete log of this run can be found in:
49 error /home/diego/snap/hugo/22151/.npm/_logs/2025-01-06T18_36_16_231Z-debug-0.log
It is clear that it is trying to use npm under the hood. But it is not what it should do, at least for my needs.
I've found in ChatGPT (I don't know where it pick this from, or if it made it up, but it told me to add this to the partials/head/css.html of my theme skeleton:
{{- $opts := dict "binary" "tailwindcss" "minify" true }}I will be honest that I didn't find in the source code of Hugo where this could be getting into, but I've tried for peace of mind. Same thing, It didn't work (as I suspected).
With all this information I think that could be a "bug", or at least a lack of configuration, for enabling the use of TailwindCSS without the Npx exec function.
Am I crazy, of this make sense?