VSCode: Failed to resolve styles in pug with extension (highlight missing)

[theramenboy]

UnoCSS version

0.53.0

Describe the bug

Issue

All the classes in pug templates are not highlighted as in normal HTML templates.

After looking around I found the same issues open and closed here: #1870
I still have this problem.

Output

The error I got (from the UnoCSS output) when open a SFC with is

"⚠️ Error on annotation
TypeError: A dynamic import callback was not specified."

The error is coming from @unocss/extractor-pug/dist/index.js::6 in the function extractorPug.

If I change the position for the line 6 const Pug = await import('pug'); inside the next line which is a try catch statement

`

try {
    const Pug = await import('pug');
    return Pug.compile(code, { filename: id, doctype: "html", ...options })();
} 
catch { }

`

and Reload Window => it will work again and the highlight work as expected in pug templates.

I opened a bug because I am not so skilled to understand what cause the issue and I know that simply put an error inside a try catch is like ignoring it.

Reproduction

I don't know how to setup an environment for testing the VSCode extension but I created a minimal repo.

https://github.com/theramenboy/unocss-vscode-resolve-style-issue

1. Download the repo
2. Open it in VSCode
3. Install UnoCSS in the extensions tab
4. Open the file 'src/components/ComponentWithoutPug' => class 'w-100' is correctly highlighted

5. Open the file 'src/components/ComponentWithPug' => class 'w-100' is not highlighted

6. Open the Output + select UnoCSS in the dropdown and there is the error.

Hope it will be enough, thanks for your time.
Awesome work

System Info

System: Windows 10
IDE: VSCode 1.78.2

Validations

• Read the Contributing Guidelines.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[ihhu]

import() cannot be executed from the client of the VSCode extension, because the VSCode extension is run with vm.Script. For details, please see microsoft/vscode#130367.

Change const Pug = await import('pug'); to const Pug = require('pug') will fix the error.

[theramenboy]

@ihhu Sorry for the late answer and thank you for your insight on vm.Script()
I confirm that changing const Pug = await import('pug'); to const Pug = require('pug') as you told it works.

But it is not my code, it is from the package @unocss/extractor-pug/dist/index.js so I hope they see this and update their code :)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.