Vite build stuck forever when using UnoCSS with presetUno() plugin

[nekomeowww]

UnoCSS version

0.54.1

Describe the bug

When the following content appears in Markdown document and try to browse and build with VitePress that configures UnoCSS and Vite:

[https://example.com/documentation/](https://example.com/documentation/)

and the following issues occur.

Issue 1: Never be able to navigate

After executing pnpm docs:dev or (nr docs:dev) command, the development server is running without any complaints and the bugged page is rendered correctly when navigate to, the server hangs and would be stuck once and only when you try to navigate back to the other pages.

Issue 2: Build forever

After executing pnpm docs:dev or (nr docs:dev) command, the building rotating indicator before building client + server bundles... would stop to rotate after a few seconds, and this will eventually result in never ending build process that stuck forever. The shell looks like this:

nr docs:build

> @ docs:build ~/Git/reproduction-vitepress-vite-unocss-build-forever
> vitepress build


  vitepress v1.0.0-beta.7

⠙ building client + server bundles...

Issue 3: Defunct processes

If you try to interrupt the stuck build process with Ctrl-C, the execution will be 'interrupted' while the true build process is still running in the background and eating 100% CPU.

After executed pnpm docs:build or (nr docs:build) command, the process tree looks like this when pulling out another terminal to inspect:

❯ pstree 09115
-+= 09115 neko /bin/zsh -il
 |-+= 12787 neko node ~/Library/pnpm/global/5/node_modules/@antfu/ni/bin/nr.mjs docs:build
 | \-+- 12793 neko node ~/Library/pnpm/global/5/node_modules/@antfu/ni/bin/nr.mjs docs:build
 |   \-+- 12817 neko /opt/homebrew/Cellar/volta/1.1.1_2/libexec/bin/volta run pnpm run docs:build
 |     \-+- 12818 neko node ~/.volta/tools/image/packages/pnpm/bin/pnpm run docs:build
 |       \-+- 12837 neko node ~/Git/reproduction-vitepress-vite-unocss-build-forever/node_modules/.bin/../vitepress/bin/vitepress.js build
 |         \--- 12843 neko ~/Git/reproduction-vitepress-vite-unocss-build-forever/node_modules/.pnpm/@esbuild+darwin-arm64@0.18.18/node_modules/@esbuild/darwin-arm64/bin/esbuild --service=0.18.18 --ping
 \--= 09722 neko /bin/zsh -il

If you look up the CPU and memory usage, you will find the node process pid 12837 is consuming 100% CPU:

❯ ps -p 12837 -o %cpu,%mem
 %CPU %MEM
100.0  1.8

Then use Ctrl-C to interrupt the build process, and the process tree for the same zsh shell pid 09115 looks like this afterwards:

❯ pstree 09115
-+= 09115 neko /bin/zsh -il
 \--= 09722 neko /bin/zsh -il

You may notice this process tree is now empty, but the process tree for the VitePress build process pid 12837 is still there with a defunct child process:

❯ pstree 12837
-+- 12837 neko node ~/Git/reproduction-vitepress-vite-unocss-build-forever/node_modules/.bin/../vitepress/bin/vitepress.js build
 \--- 12843 neko <defunct>

By this time, the CPU usage for the node process pid 12837 is still 100%:

❯ ps -p 12837 -o %cpu,%mem
 %CPU %MEM
100.0  1.8

After few minutes, the shell that used to interact with pnpm docs:build or (nr docs:build) command may suddenly respond [vite:esbuild-transpile] The service was stopped: write EPIPE error even when you have interrupted the build process already.

Troubleshooting

• I tried to check the content above, nor invisible and control characters found.
• Tried to update all the dependencies.
• Tried to disable every plugin I used in Vite, I found that the issue is caused by the unocss plugin only when presetUno() UnoCSS plugin was enabled.
• It looks like the url content must have a valid and resolvable host, otherwise the issue won't occur. (FYI, the initial url that caused the issue was https://www.swift.org/documentation/)

Further more

Another thing is, I think either Vite or esbuild should have a better way to handle the timeout issue when building forever and deal with the child process to prevent defunct process. Otherwise, if user keep retry and interrupt the build process, the defunct process will keep increasing and cause the system to stay on high load with loads of defunct processes that consume 100% CPU and memory.

Reproduction

I don't know how to reproduce such issue with just Vue 3 and UnoCSS, please respond me whether the initial repro repo is sufficient or not, I will keep working and learning how to setup the repro in UnoCSS StackBlitz while triage.

Repro included below.

With VitePress / Vite / Vue 3

GitHub: https://github.com/nekomeowww/reproduction-vitepress-vite-unocss-build-forever
StackBlitz: https://stackblitz.com/github/nekomeowww/reproduction-vitepress-vite-unocss-build-forever

With vite-plugin-vue-markdown / Vite / Vue 3

Warning
Since this bug will stuck the dev server and take up 100% CPU, running the dev server on the Web Container platform such as StackBlitz will cause the dev server consume more CPU, please shutdown it properly after inspection.

StackBlitz: https://stackblitz.com/edit/unocss-unocss-c5ryb7?file=src%2FApp.vue

System Info

System

uname -a                                                                             
Darwin AyakaNeko-MBP14.lan 22.5.0 Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000 arm64

Browser

Microsoft Edge Version 115.0.1901.188 (Official build) (arm64)

Affected versions

• 0.53.0
• 0.53.1
• 0.53.2
• 0.53.3
• 0.53.4
• 0.53.5
• 0.53.6
• 0.53.7
• 0.54.0
• 0.54.1

It works well on 0.52.7 and below.

Toolchain

• Volta 1.1.1
• Node v18.17.0
• pnpm 8.6.11

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.

[zyyv]

Thanks your catch, i found this reason because this code has no effect, cause the program to crash.

'[https://example.com/documentation/](https://example.com/documentation/)'.match(/^\[(--(\w|\\\W)+|[\w-]+):(("[^\s"]+?"|'[^\s']+?'|`[^\s`]+?`|[^\s:'"`;{}]+?)+)\]$/)

This code also has no effect in browser console.

I guess we should optimize our extractor avoid this case.

[Wxw-Gu]

Thanks your catch, i found this reason because this code has no effect, cause the program to crash.

'[https://example.com/documentation/](https://example.com/documentation/)'.match(/^\[(--(\w|\\\W)+|[\w-]+):(("[^\s"]+?"|'[^\s']+?'|`[^\s`]+?`|[^\s:'"`;{}]+?)+)\]$/)

This code also has no effect in browser console.

I guess we should optimize our extractor avoid this case.

The same is true for the elementRE of transformer-attribute-jsx 🙋