How to troubleshoot _very_ slow extraction times?

[adaboese]

Sometimes Panda will randomly take 30-90 seconds to extract CSS.

🐼 info [hrtime] Extracted in (53.00ms)
🐼 info [hrtime] Extracted in (45701.32ms)
🐼 info [hrtime] Extracted in (91878.59ms)
🐼 info [hrtime] Extracted in (46.61ms)

How do I troubleshoot what's happening in those cases?

It's happening while developing https://aimd.app/, which is really a medium size app, so I doubt it can be the size of the project. It must be that it is picking up some files that it shouldn't.

If I run panda analyze, I only get the files that I am expecting to see:

🐼 info [cli] Found 1103 token used in 118 files

[FlatMapIO]

I'm using park-ui in a vite@lates project and I'm finding that it takes 5~infinite seconds to load the page, which I just realized is caused by pandacss. I ran into this problem a couple months ago and was busy with other things, but I didn't realize it was still happening.

[FlatMapIO]

My temporary solution is to just import 'styled-system/styles.css' and manually call panda to generate the CSS. It's really slow, but at least it doesn't freeze the page load.

[segunadebayo]

Hi @adaboese,

Thanks for reporting this. Could you run the panda debug command and possibly share the output of styled-system/debug with us.

This will help track down the root cause of the issue.

In the meantime, consider downgrading to 0.20.x

[adaboese]

It seems debug is failing with:

🐼 error [cli] TypeError: Cannot read properties of undefined (reading 'css')
    at /Users/ada/Developer/adaboese/aimd/node_modules/.pnpm/@[email protected]/node_modules/@pandacss/core/dist/index.js:1547:42
    at Array.forEach (<anonymous>)
    at Stylesheet.processAtomicRecipe (/Users/ada/Developer/adaboese/aimd/node_modules/.pnpm/@[email protected]/node_modules/@pandacss/core/dist/index.js:1546:22)
    at /Users/ada/Developer/adaboese/aimd/node_modules/.pnpm/@[email protected]/node_modules/@pandacss/generator/dist/index.js:3555:22
    at Array.forEach (<anonymous>)
    at /Users/ada/Developer/adaboese/aimd/node_modules/.pnpm/@[email protected]/node_modules/@pandacss/generator/dist/index.js:3554:14
    at Set.forEach (<anonymous>)
    at generateParserCss (/Users/ada/Developer/adaboese/aimd/node_modules/.pnpm/@[email protected]/node_modules/@pandacss/generator/dist/index.js:3553:14)
    at /Users/ada/Developer/adaboese/aimd/node_modules/.pnpm/@[email protected]/node_modules/@pandacss/generator/dist/index.js:4382:7
    at Array.forEach (<anonymous>)

Not sure where to go from here, as the error does not identify the origin of the issue.

All other commands work fine.

[adaboese]

oh wow, downgrading to 0.20.1 makes the issue entirely go away! thank you

[boar-is]

Cannot read properties of undefined (reading 'css')

I had the same error and made it work by making the include globs more specific:

// Before
{
  include: ['./**/*.{js,jsx,ts,tsx}'],
  exclude: ['node_modules']
}

// After
{
  include: ['./app/**/*.{js,jsx,ts,tsx}', './lib/**/*.{js,jsx,ts,tsx}']
}

Maybe it will help.

[astahmer]

hey, we're fixing it (among other improvements) here #1860