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.

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'),
  },
}