Node eats all CPU if usePrettier is enabled

[beliolfa]

Version

module: 0.1.6
nuxt: 2.14.8

Nuxt configuration

mode:

• universal
• spa

Nuxt configuration

htmlValidator: {
    usePrettier: true,
  },

Reproduction

When I run yarn dev it takes 2-3 minutes consuming all CPU, then it shows the warnings in console and loads the page.

What is expected?

Load the app without performance impact

What is actually happening?

Takes a lot to load and show validation errors

Steps to reproduce

set usePrettier to true and yarn dev

Additional information

It is something weird because my coworkers can run it without any issue.
I'm on a Macbook 16" 2019 using Node 12.19.0

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

Performance analysis?

[danielroe]

@beliolfa Would appreciate a reproduction, if you could. For example, is there an issue with this CodeSandbox?

[beliolfa]

Hi @danielroe, the code sandbox just works. I noticed in my project that it also works if I comment the @nuxtjs/tailwindcss module.

I tried to reproduce it in a fresh nuxt project with @nuxtjs/tailwindcss but it is working there. I don't know what edge case I'm having on this project but I can not use this usePrettier feature.

[danielroe]

It seems likely this is an issue with prettier. But I'm happy to look into this if you could just supply the rendered HTML of the page that is causing the hang.

[beliolfa]

Here's a codesandbox with the generated HTML. Thanks!

https://codesandbox.io/s/sad-tharp-0ysbo

[danielroe]

Testing it with the W3C Markup Validator - it causes a 500 internal server error 😆

Running prettier directly on the generated HTML also causes a freeze.

I think it's fair to say the issue is the HTML. But if after investigating further you think there is an issue with prettier then it would be worth raising it directly on their repo. (This module isn't causing the issue.)

[beliolfa]

Ok. You pointed me to the right track. The main issue here is Tailwind in development injects 100k+ lines of CSS. In our case with variants and responsive 200k+. That makes Prettier scan that huge file. Here is a minimal reproduction using a fresh Nuxt + a fresh tailwind module. https://github.com/64robots/html-validator-repro

If you run yarn dev is going to take at least 20 secs in rendering the page. If you increase the size of that CSS then it is exponential.

For us, the fix will be to set the purge.enabled to true even in dev. I can confirm that it fixes the issue.

Thank you for your time!

[danielroe]

@beliolfa Glad to have helped 🙂