How can I debug the "Unknown word" error?

[Nefcanto]

I reported #16447.
Basically, it's an error like this:

[vite:css] [postcss] /Project/SiteQwik/src/global.css:3444:27: Unknown word
file: /Project/SiteQwik/src/global.css:3444:26

So, it has no information related to my code. I'm stuck on how to debug it.
Here it's said that using the Tailwind CLI and --watch flag would help and show the line that has error. I called it in these ways:

npx @tailwindcss/cli -o ./src/output.css --watch

npx @tailwindcss/cli -i ./src/global.css -o ./src/output.css --watch

And for both I just got this response, and any file that I change, I don't see it being re-executed or anything be printed.

How can I debug it?

[Inventoris]

Hi @Nefcanto!

Go to line 3444 and look at characters 26-27 as written in the log here:

[vite:css] [postcss] /Project/SiteQwik/src/global.css:3444:27: Unknown word

[Nefcanto]

The point is, when I call npm run dev I get this error at a different line. And when I call npm run build it shows me a different line number. So how do I know which line?

[wongjn]

I ran the build using a JavaScript debugger and had a breakpoint at the error emission point in PostCSS code. When it hits the breakpoint, you can see the grammar token it gets stuck on in some parent method. You can also look higher up the callstack in .parse() to see the CSS that it is given.

Could be related to:

• tailwindcss v4.0 @tailwindcss/forms "Unknown word" error #15818 (reply in thread)
• Vue static vdom stringifier breaks PostCSS in Nuxt Production build #16358

At least in terms of HTML entities causing Tailwind to emit CSS that PostCSS can't handle.

[Nefcanto]

@wongjn I'm developing inside a docker container. I don't know how to debug the code there. I can use remote debugging. But then where to put the breakpoint? Can you please explain more?

[wongjn]

Put the breakpoint at /npm/node_modules/postcss/lib/input.js at line 109. The look at the variables and also look higher up the call tree to get a better idea of the context.

[Nefcanto]

Thanks for this help. I found the line. It's result = new CssSyntaxError(. But how should I make the VS Code attached to the container to run for this line? I know about .vscode directory. But I don't know how to connect it to npm run dev.

[wongjn]

I generally use the JavaScript Debugging Terminal, it should work if you can open VSCode from inside the docker container.