v0.2.6 completely breaks Prettier in Svelte Projects

[n00ki]

Node version: 18.12.1
Package Manager: pnpm 8.2.0
VSCode version: 1.77.1
prettier version: 2.8.7
prettier-plugin-tailwindcss version: 0.2.6
tailwindcssversion: 3.3.1
OS: macOS Ventura 13.3

Hi :)
I'm dealing with a significant performance issue across all of my SvelteKit projects, after upgrading prettier-plugin-tailwindcss to v0.2.6.
Upon launch, CPU climbs to 100% and higher, which makes coding basically impossible. it seems like the app shell is doing fine, yet the code editing experience (auto-completion, formatting, saving, etc.) completely breaks.
After running the Bisect tool, as the CPU hogging process is Code Helper (Plugin) (or ExtensionHost), It seems like Prettier is the root cause.

It's important to mention that I didn't make any changes in VSCode/prettier configurations.
removing prettier-plugin-tailwindcss entirely from the prettier plugins array / downgrading it to 0.2.5 fixed the issue immediately.

I've attached some screenshots of the activity monitor, VSCode Process Explorer, ps aux, and messages displayed when attempting to save Svelte / TS files (while saving is prevented, and vscode is basically stuck).

// .prettierrc
{
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 120,
  "bracketSameLine": true,
  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
  "pluginSearchDirs": false,
  "overrides": [
    {
      "files": "*.svelte",
      "options": {
        "parser": "svelte",
        "svelteSortOrder": "scripts-markup-styles",
        "svelteBracketNewLine": false,
        "svelteAllowShorthand": true,
        "svelteIndentScriptAndStyle": true
      }
    }
  ]
}

Any ideas? 💡

[thecrypticace]

Hey! This will likely be impossible to debug without a reproduction project to test in. This does not happen to me in a freshly set up SvelteKit project and I tried best replicating your set up (node, pnpm, prettier version, Ventura, etc…). Can you create a new project and let me know what you see there? Also is there any project/repo this happens in that you can share? Even a stripped down version that still produces problems?

It would also be beneficial to have a list of your installed VS Code plugins and settings relating to formatting. I always have trouble with pnpm and the prettier extension not working at all unless I use "Format Code (Forced)" and I'm not sure if that's what you're doing here or not.

I suspect it has something to do with the new config resolution for TypeScript and ESM configs but I can't figure out why that would be a problem. If it's using ~90–100% of the CPU that makes it sound like it's stuck in a loop for some reason.

[thecrypticace]

Basically, what I want to be able to do is reproduce this locally and then profile the process in Instruments and tracking syscalls using dtruss (have to reboot and enable it because of SIP :/) to see what could be happening here.

That'll at least point me in a direction as to what might be going on.

[n00ki]

Hey! This will likely be impossible to debug without a reproduction project to test in. This does not happen to me in a freshly set up SvelteKit project and I tried best replicating your set up (node, pnpm, prettier version, Ventura, etc…). Can you create a new project and let me know what you see there? Also is there any project/repo this happens in that you can share? Even a stripped down version that still produces problems?

It would also be beneficial to have a list of your installed VS Code plugins and settings relating to formatting. I always have trouble with pnpm and the prettier extension not working at all unless I use "Format Code (Forced)" and I'm not sure if that's what you're doing here or not.

I suspect it has something to do with the new config resolution for TypeScript and ESM configs but I can't figure out why that would be a problem. If it's using ~90–100% of the CPU that makes it sound like it's stuck in a loop for some reason.

Hi 😀
Thanks for reaching out!
The best I can do atm is:

https://github.com/n00ki/kickoff-sveltekit

Which is a starter template I made. The issue is reproduced when working on it.

Hope it's good enough🙏🏼

[thecrypticace]

That's helpful! I left the project open in a Svelte file for almost an hour and merely typing in the editor makes vS Code stutter now. Not even related to saving the files which is quite odd. I'll see if I can figure out what's going on.

[jycouet]

On my side, going from 0.2.5 to 0.2.6 is also problematic.

When I run prettier (on a large project) as I get:

<--- Last few GCs --->

[23336:0x6b69590]   269312 ms: Mark-sweep 3591.9 (4128.2) -> 3574.8 (4125.2) MB, 726.2 / 0.0 ms  (average mu = 0.331, current mu = 0.271) allocation failure; scavenge might not succeed
[23336:0x6b69590]   269488 ms: Scavenge 3592.4 (4126.0) -> 3578.6 (4126.0) MB, 27.7 / 0.0 ms  (average mu = 0.331, current mu = 0.271) allocation failure; 
[23336:0x6b69590]   269584 ms: Scavenge 3593.7 (4126.5) -> 3581.2 (4127.2) MB, 13.8 / 0.0 ms  (average mu = 0.331, current mu = 0.271) allocation failure; 


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb7b3e0 node::Abort() [node]
 2: 0xa8c8aa  [node]
 3: 0xd69100 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xd694a7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xf46ba5  [node]
 6: 0xf47aa8 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node]
 7: 0xf57fb3  [node]
 8: 0xf58e28 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 9: 0xf3378e v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
10: 0xf34b57 v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
11: 0xf15d2a v8::internal::Factory::NewFillerObject(int, v8::internal::AllocationAlignment, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
12: 0x12dacdf v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
13: 0x1707b79  [node]

(I'm also in a sveltekit project)

[stanf0rd]

Can confirm the same for 0.2.7 version — Svelte prettifying is really slow

[n00ki]

@thecrypticace any chance you were able to find the root cause for this behavior?
I did try to debug it myself, yet it seems like I lack the fundamental understanding of the plugin’s inner working...

[andy1li]

Thanks for the issue!

Downgrading back to 0.2.5 temporarily solved the extremely slow prettifying in my svelte project.

[thecrypticace]

@n00ki Not yet. The slowness I ended up experiencing appeared to have been a weird interaction with the Prettier VS Code extension, an invalid config file, and copilot. As soon as I disabled co-pilot the typing speed returned to normal. So I think it's unrelated.

[reinink]

Hey just a note on this — we were able to reproduce this issue and were able to verify that this occurs with the VS Code Prettier extension with nothing else enabled (using Extension Bisect).

Disabling the prettier-plugin-tailwindcss resolves the issue, so somehow the VS Code Prettier extension and this plugin are not getting along.

At this point we need to do some more debugging to see if we can figure out what's causing this.

[thecrypticace]

Hey! So we think we've got a fix for this. I've merged this in #153 and it's available to test via our insiders build:

npm install prettier-plugin-tailwindcss@insiders

Could you give it a test and report back? You'll need to close/reopen VS Code after installing it so the prettier extension doesn't have the old version in memory.

[n00ki]

Hey! So we think we've got a fix for this. I've merged this in #153 and it's available to test via our insiders build:

npm install prettier-plugin-tailwindcss@insiders

Could you give it a test and report back? You'll need to close/reopen VS Code after installing it so the prettier extension doesn't have the old version in memory.

Gave it a go, looks great! seems like you did it :)