Linting

The ESLint plugin lints against the same extraction the build uses, so it knows which values resolve to your tokens. The recommended config flags hardcoded colors and deprecated entries out of the box.

import panda from '@pandacss/eslint-plugin'
 
export default [
  await panda.configs.recommended({ configPath: './panda.config.ts' })
]

Widen enforcement

prefer-token defaults to colors only. Add the categories your system owns, and the opt-in consistency rules:

import panda from '@pandacss/eslint-plugin'
 
const recommended = await panda.configs.recommended({ configPath: './panda.config.ts' })
 
export default [
  {
    ...recommended,
    rules: {
      ...recommended.rules,
      '@pandacss/prefer-token': ['warn', { categories: ['colors', 'spacing', 'radii'] }],
      '@pandacss/prefer-text-style': 'warn',
      '@pandacss/no-physical-properties': 'warn',
      '@pandacss/no-important': 'warn'
    }
  }
]

Lint the consuming apps

The plugin loads each app's panda.config.ts, so an app with designSystem: '@acme/ds' lints against the merged theme. Ship the lint config with the design system (a shared ESLint config package) and every app enforces the same rules against the same tokens.

See also

• Linting for the full rule set and Oxlint setup
• Deprecations for what no-deprecated flags