{"id":28446589,"url":"https://github.com/chakra-ui/eslint-plugin-panda","last_synced_at":"2025-07-12T03:34:01.143Z","repository":{"id":218600253,"uuid":"746862969","full_name":"chakra-ui/eslint-plugin-panda","owner":"chakra-ui","description":"Official ESLint Plugin for Panda CSS","archived":false,"fork":false,"pushed_at":"2025-07-09T02:07:14.000Z","size":877,"stargazers_count":90,"open_issues_count":14,"forks_count":6,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-09T03:23:39.737Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chakra-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-01-22T20:24:49.000Z","updated_at":"2025-06-27T01:09:49.000Z","dependencies_parsed_at":"2024-02-08T01:27:54.033Z","dependency_job_id":"e1407038-3790-4778-bbbf-46c82323a563","html_url":"https://github.com/chakra-ui/eslint-plugin-panda","commit_stats":null,"previous_names":["chakra-ui/eslint-plugin-panda"],"tags_count":45,"template":false,"template_full_name":null,"purl":"pkg:github/chakra-ui/eslint-plugin-panda","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Feslint-plugin-panda","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Feslint-plugin-panda/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Feslint-plugin-panda/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Feslint-plugin-panda/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chakra-ui","download_url":"https://codeload.github.com/chakra-ui/eslint-plugin-panda/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Feslint-plugin-panda/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264930719,"owners_count":23684916,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-06T11:07:30.817Z","updated_at":"2025-07-12T03:34:01.111Z","avatar_url":"https://github.com/chakra-ui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- This file is built by build-readme.js. Do not edit it directly; edit README.md.template instead. --\u003e\n\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://panda-css.com\"\u003e\n        \u003cpicture\u003e\n            \u003cimg alt=\"Panda CSS\" src=\"https://github.com/chakra-ui/eslint-plugin-panda/raw/main/.github/banner.png\" width=\"100%\"\u003e\n        \u003c/picture\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003eESLint plugin for Panda CSS\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca aria-label=\"Github Actions\" href=\"https://github.com/chakra-ui/eslint-plugin-panda/actions/workflows/quality.yml\"\u003e\n        \u003cpicture\u003e\n            \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/github/actions/workflow/status/chakra-ui/eslint-plugin-panda/quality.yml?branch=main\u0026label=%20\u0026message=twitter\u0026color=212022\u0026logo=githubactions\u0026style=for-the-badge\"\u003e\n            \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/github/actions/workflow/status/chakra-ui/eslint-plugin-panda/quality.yml?branch=main\u0026label=%20\u0026message=twitter\u0026color=f6f7f8\u0026logo=githubactions\u0026style=for-the-badge\u0026logoColor=%23000\"\u003e\n            \u003cimg alt=\"Github release actions\" src=\"https://img.shields.io/github/actions/workflow/status/chakra-ui/eslint-plugin-panda/quality.yml?branch=main\u0026label=%20\u0026message=twitter\u0026color=f6f7f8\u0026logo=githubactions\u0026style=for-the-badge\u0026logoColor=%23000\"\u003e\n        \u003c/picture\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003c/div\u003e\n\n## Getting Started\n\n### Installation\n\n```bash\npnpm add -D @pandacss/eslint-plugin\n```\n\n### Usage\n\nAdd `@pandacss/eslint-plugin` to the plugins section of your `.eslintrc` configuration file. You can omit the\n`/eslint-plugin` suffx:\n\n```json\n{\n  \"plugins\": [\"@pandacss\"]\n}\n```\n\nThen configure the rules you want to use under the rules section.\n\n```json\n{\n  \"rules\": {\n    \"@pandacss/no-debug\": \"error\"\n  }\n}\n```\n\nYou can also enable the `recommended` rules in extends:\n\n```diff\n{\n-   \"plugins\": [\"@pandacss\"]\n+   \"extends\": [\"plugin:@pandacss/recommended\"]\n}\n```\n\nOr enable all rules in extends:\n\n```diff\n{\n-   \"plugins\": [\"@pandacss\"]\n+   \"extends\": [\"plugin:@pandacss/all\"]\n}\n```\n\n\u003e [!WARNING]  \n\u003e This is not recommended. You should only enable the rules you need.\n\n### Flat Config\n\nIf you use [the flat config format](https://eslint.org/docs/latest/use/configure/configuration-files), you can import\nthe plugin and rules from `@pandacss/eslint-plugin` and put it into your config.\n\n```js filename=\"eslint.config.mjs\"\nimport typescriptParser from '@typescript-eslint/parser'\nimport panda from '@pandacss/eslint-plugin'\n\nexport default [\n  {\n    files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],\n    ignores: ['**/*.d.ts', 'styled-system'],\n    plugins: {\n      '@pandacss': panda,\n    },\n    languageOptions: {\n      parser: typescriptParser,\n    },\n    rules: {\n      // Configure rules here\n      '@pandacss/no-debug': 'error',\n      // You can also use the recommended rules\n      ...panda.configs.recommended.rules,\n      // Or all rules\n      ...panda.configs.all.rules,\n    },\n  },\n]\n```\n\nYou can see an example using `typescript-eslint` at [sandbox/v9/eslint.config.mjs](./sandbox/v9/eslint.config.mjs).\n\n## Rules\n\nRules with ⚙️ have options. Click on the rule to see the options.\n\nWhere rules are included in the configs `recommended`, or `all` it is indicated below.\n\n| Rule                                                                                     | `recommended` |\n| ---------------------------------------------------------------------------------------- | ------------- |\n| [`@pandacss/file-not-included`](docs/rules/file-not-included.md)                         | ✔️            |\n| [`@pandacss/no-config-function-in-source`](docs/rules/no-config-function-in-source.md)   | ✔️            |\n| [`@pandacss/no-debug`](docs/rules/no-debug.md)                                           | ✔️            |\n| [`@pandacss/no-deprecated-tokens`](docs/rules/no-deprecated-tokens.md)                   | ✔️            |\n| [`@pandacss/no-dynamic-styling`](docs/rules/no-dynamic-styling.md)                       | ✔️            |\n| [`@pandacss/no-escape-hatch`](docs/rules/no-escape-hatch.md)                             |               |\n| [`@pandacss/no-hardcoded-color`](docs/rules/no-hardcoded-color.md) ⚙️                    | ✔️            |\n| [`@pandacss/no-important`](docs/rules/no-important.md)                                   |               |\n| [`@pandacss/no-invalid-token-paths`](docs/rules/no-invalid-token-paths.md)               | ✔️            |\n| [`@pandacss/no-invalid-nesting`](docs/rules/no-invalid-nesting.md)                       | ✔️            |\n| [`@pandacss/no-margin-properties`](docs/rules/no-margin-properties.md) ⚙️                |               |\n| [`@pandacss/no-physical-properties`](docs/rules/no-physical-properties.md) ⚙️            |               |\n| [`@pandacss/no-property-renaming`](docs/rules/no-property-renaming.md)                   | ✔️            |\n| [`@pandacss/no-unsafe-token-fn-usage`](docs/rules/no-unsafe-token-fn-usage.md)           | ✔️            |\n| [`@pandacss/prefer-longhand-properties`](docs/rules/prefer-longhand-properties.md) ⚙️    |               |\n| [`@pandacss/prefer-shorthand-properties`](docs/rules/prefer-shorthand-properties.md) ⚙️  |               |\n| [`@pandacss/prefer-atomic-properties`](docs/rules/prefer-atomic-properties.md) ⚙️        |               |\n| [`@pandacss/prefer-composite-properties`](docs/rules/prefer-composite-properties.md) ⚙️  |               |\n| [`@pandacss/prefer-unified-property-style`](docs/rules/prefer-unified-property-style.md) |               |\n\n## Settings\n\n### `configPath`\n\nYou can tell `eslint` to use a custom panda config file by setting the `configPath` option in your `.eslintrc.js` file.\n\nBy default we find the nearest panda config to the linted file.\n\n```js filename=\".eslintrc.(c)js\"\nconst path = require('path')\n\nmodule.exports = {\n  plugins: ['@pandacss'],\n  settings: {\n    '@pandacss/configPath': path.join('PATH-TO/panda.config.js'),\n  },\n}\n```\n\n#### Flat Config\n\n```js filename=\"eslint.config.mjs\"\nimport panda from '@pandacss/eslint-plugin'\nimport path from 'node:path'\n\nexport default [\n  {\n    plugins: {\n      '@pandacss': panda,\n    },\n    settings: {\n      '@pandacss/configPath': path.join('PATH-TO/panda.config.js'),\n    },\n  },\n]\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchakra-ui%2Feslint-plugin-panda","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchakra-ui%2Feslint-plugin-panda","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchakra-ui%2Feslint-plugin-panda/lists"}