Skip to content

Conversation

@farlock
Copy link
Contributor

@farlock farlock commented Nov 25, 2025

What kind of change does this PR introduce?

Fixes #160

The getFiles() method is part of PandaContext It scans the entire project and returns all files matching the Panda CSS include/exclude patterns. This is slow on large projects (Complexity O(N)).

Code Changes:

  • Modified plugin/src/utils/worker.ts to use Generator instead of PandaContext:
    • Before: loadConfigAndCreateContext() → Creates full PandaContext
    • After: loadConfig() + new Generator() → Creates minimal context

isValidFile needed to be adapted. It now:

  • Gets the include and exclude patterns from config ( e.g. ['src/**/*.{ts,tsx}'])
  • Convert the file path to be relative to the config directory
  • Use micromatch to check if the path matches the patterns directly (Complexity O(1))

Performance Impact

Tested on a large scale repository with TIMING=1 npx eslint --fix someFile

Before

Rule                                    | Time (ms) | Relative
:---------------------------------------|----------:|--------:
@pandacss/file-not-included             | 12138.285 |    98.9%

After

Rule                                    | Time (ms) | Relative
:---------------------------------------|----------:|--------:
@pandacss/file-not-included             |  1154.767 |    90.9%

-> perf gain is ~10x

Breaking Changes

isValidFile should have the same behaviour

How can this change be tested

  1. i run the plugin in my app and for me it works, @anubra266 can you please help testing this
  2. tests are passing ✅ after some changes on the worker context (they are commented in the pr comments)

...v9Config,
include: ['**/*'],
exclude: ['**/Invalid.tsx', '**/panda.config.ts'],
importMap: './panda',
Copy link
Contributor Author

@farlock farlock Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The test files import Panda artifacts from ./panda/... The generator needs this importMap to correctly identify these imports as belonging to Panda.

ctx.getFiles = () => ['App.tsx']
const ctx = createGeneratorContext({
...v9Config,
include: ['**/*'],
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensures that all files used in tests (e.g., App.tsx) are considered valid

include: ['**/*'],
exclude: ['**/Invalid.tsx', '**/panda.config.ts'],
importMap: './panda',
jsxFactory: 'styled',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Th sandbox/v9/panda.config.ts sets jsxFactory to 'panda', but the tests use styled (e.g., styled.div). Overriding this to 'styled' ensures that matchImports correctly identifies styled as the JSX factory, enabling rules like no-dynamic-styling to work correctly....

const ctx = createContext() as unknown as PandaContext
ctx.getFiles = () => ['App.tsx']
const ctx = createGeneratorContext({
...v9Config,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the tests rely on the specific configuration (tokens, recipes, conditions) defined in
sandbox/v9/panda.config.ts

@farlock farlock marked this pull request as ready for review November 27, 2025 14:14
@anubra266 anubra266 merged commit 592c963 into chakra-ui:main Nov 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Plugin's unbearably slow

2 participants