ESLint plugin for Panda CSS

Getting Started

Installation

pnpm add -D @pandacss/eslint-plugin

Usage

Add @pandacss/eslint-plugin to the plugins section of your .eslintrc configuration file. You can omit the /eslint-plugin suffx:

{
  "plugins": ["@pandacss"]
}

Then configure the rules you want to use under the rules section.

{
  "rules": {
    "@pandacss/no-debug": "error"
  }
}

You can also enable the recommended rules in extends:

{
-   "plugins": ["@pandacss"]
+   "extends": ["plugin:@pandacss/recommended"]
}

Or enable all rules in extends:

{
-   "plugins": ["@pandacss"]
+   "extends": ["plugin:@pandacss/all"]
}

Warning

This is not recommended. You should only enable the rules you need.

Flat Config

If you use the flat config format, you can import the plugin and rules from @pandacss/eslint-plugin and put it into your config.

import typescriptParser from '@typescript-eslint/parser'
import panda from '@pandacss/eslint-plugin'

export default [
  {
    files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
    ignores: ['**/*.d.ts', 'styled-system'],
    plugins: {
      '@pandacss': panda,
    },
    languageOptions: {
      parser: typescriptParser,
    },
    rules: {
      // Configure rules here
      '@pandacss/no-debug': 'error',
      // You can also use the recommended rules
      ...panda.configs.recommended.rules,
      // Or all rules
      ...panda.configs.all.rules,
    },
  },
]

You can see an example using typescript-eslint at sandbox/v9/eslint.config.mjs.

Rules

Rules with ⚙️ have options. Click on the rule to see the options.

Where rules are included in the configs recommended, or all it is indicated below.

Rule	recommended
@pandacss/file-not-included	✔️
@pandacss/no-config-function-in-source	✔️
@pandacss/no-debug	✔️
@pandacss/no-dynamic-styling	✔️
@pandacss/no-escape-hatch
@pandacss/no-hardcoded-color ⚙️	✔️
@pandacss/no-important
@pandacss/no-invalid-token-paths	✔️
@pandacss/no-invalid-nesting	✔️
@pandacss/no-margin-properties
@pandacss/no-physical-properties
@pandacss/no-property-renaming	✔️
@pandacss/no-unsafe-token-fn-usage	✔️
@pandacss/prefer-longhand-properties
@pandacss/prefer-shorthand-properties
@pandacss/prefer-atomic-properties
@pandacss/prefer-composite-properties
@pandacss/prefer-unified-property-style

Settings

configPath

You can tell eslint to use a custom panda config file by setting the configPath option in your .eslintrc.js file.

By default we find the nearest panda config to the linted file.

const path = require('path')

module.exports = {
  plugins: ['@pandacss'],
  settings: {
    '@pandacss/configPath': path.join('PATH-TO/panda.config.js'),
  },
}

Flat Config

import panda from '@pandacss/eslint-plugin'
import path from 'node:path'

export default [
  {
    plugins: {
      '@pandacss': panda,
    },
    settings: {
      '@pandacss/configPath': path.join('PATH-TO/panda.config.js'),
    },
  },
]