-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: update readme to use new image
- Loading branch information
1 parent
a284a87
commit 582da4a
Showing
4 changed files
with
113 additions
and
112 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,111 +1,111 @@ | ||
| <!-- This file is built by build-readme.js. Do not edit it directly; edit README.md.template instead. --> | ||
| <br> | ||
| <div align="center"> | ||
|
|
||
| <p align="center"> | ||
| <a href="https://panda-css.com"> | ||
| <picture> | ||
| <img alt="Panda CSS" src="https://github.com/chakra-ui/panda/raw/main/.github/assets/banner.png" width="100%"> | ||
| </picture> | ||
| </a> | ||
| </p> | ||
| <p align="center">ESLint plugin for Panda CSS</p> | ||
|
|
||
| <p align="center"> | ||
| <a aria-label="Github Actions" href="https://github.com/chakra-ui/eslint-plugin-panda/actions/workflows/quality.yml"> | ||
| <picture> | ||
| <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/chakra-ui/eslint-plugin-panda/quality.yml?branch=main&label=%20&message=twitter&color=212022&logo=githubactions&style=for-the-badge"> | ||
| <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/chakra-ui/eslint-plugin-panda/quality.yml?branch=main&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000"> | ||
| <img alt="Github release actions" src="https://img.shields.io/github/actions/workflow/status/chakra-ui/eslint-plugin-panda/quality.yml?branch=main&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000"> | ||
| </picture> | ||
| </a> | ||
| </p> | ||
|
|
||
| </div> | ||
|
|
||
| ## Getting Started | ||
|
|
||
| ### Installation | ||
|
|
||
| ```bash | ||
| 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: | ||
|
|
||
| ```json | ||
| { | ||
| "plugins": ["@pandacss"] | ||
| } | ||
| ``` | ||
|
|
||
| Then configure the rules you want to use under the rules section. | ||
|
|
||
| ```json | ||
| { | ||
| "rules": { | ||
| "@pandacss/no-debug": "error" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| You can also enable the `recommended` rules in extends: | ||
|
|
||
| ```diff | ||
| { | ||
| - "plugins": ["@pandacss"] | ||
| + "extends": ["plugin:@pandacss/recommended"] | ||
| } | ||
| ``` | ||
|
|
||
| Or enable all rules in extends: | ||
|
|
||
| ```diff | ||
| { | ||
| - "plugins": ["@pandacss"] | ||
| + "extends": ["plugin:@pandacss/all"] | ||
| } | ||
| ``` | ||
|
|
||
| > [!WARNING] | ||
| > This is not recommended. You should only enable the rules you need. | ||
| ## Rules | ||
|
|
||
| Rules with options are indicated with ⚙️. Rules which are fixable are indicated with 🔧. | ||
|
|
||
| Where rules are included in the configs `recommended`, or `all` it is indicated below. | ||
|
|
||
| - [`@pandacss/file-not-included`](docs/rules/file-not-included.md) `all`, `recommended` | ||
| - [`@pandacss/no-config-function-in-source`](docs/rules/no-config-function-in-source.md) 🔧 `all`, `recommended` | ||
| - [`@pandacss/no-debug`](docs/rules/no-debug.md) 🔧 `all`, `recommended` | ||
| - [`@pandacss/no-dynamic-styling`](docs/rules/no-dynamic-styling.md) `all`, `recommended` | ||
| - [`@pandacss/no-escape-hatch`](docs/rules/no-escape-hatch.md) 🔧 `all` | ||
| - [`@pandacss/no-hardcoded-color`](docs/rules/no-hardcoded-color.md) `all` | ||
| - [`@pandacss/no-invalid-token-paths`](docs/rules/no-invalid-token-paths.md) `all`, `recommended` | ||
| - [`@pandacss/no-property-renaming`](docs/rules/no-property-renaming.md) `all`, `recommended` | ||
| - [`@pandacss/no-shorthand-prop`](docs/rules/no-shorthand-prop.md) 🔧 `all` | ||
| - [`@pandacss/no-unsafe-token-fn-usage`](docs/rules/no-unsafe-token-fn-usage.md) 🔧 `all` | ||
| - [`@pandacss/prefer-atomic-properties`](docs/rules/prefer-atomic-properties.md) `all` | ||
|
|
||
| ## 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. | ||
|
|
||
| ```js filename=".eslintrc.(c)js" | ||
| const path = require('path') | ||
|
|
||
| module.exports = { | ||
| plugins: ['@pandacss'], | ||
| settings: { | ||
| '@pandacss/configPath': path.join('PATH-TO/panda.config.js'), | ||
| }, | ||
| } | ||
| ``` | ||
| <!-- This file is built by build-readme.js. Do not edit it directly; edit README.md.template instead. --> | ||
| <br> | ||
| <div align="center"> | ||
|
|
||
| <p align="center"> | ||
| <a href="https://panda-css.com"> | ||
| <picture> | ||
| <img alt="Panda CSS" src="https://github.com/chakra-ui/eslint-plugin-panda/raw/main/.github/banner.png" width="100%"> | ||
| </picture> | ||
| </a> | ||
| </p> | ||
| <p align="center">ESLint plugin for Panda CSS</p> | ||
|
|
||
| <p align="center"> | ||
| <a aria-label="Github Actions" href="https://github.com/chakra-ui/eslint-plugin-panda/actions/workflows/quality.yml"> | ||
| <picture> | ||
| <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/chakra-ui/eslint-plugin-panda/quality.yml?branch=main&label=%20&message=twitter&color=212022&logo=githubactions&style=for-the-badge"> | ||
| <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/chakra-ui/eslint-plugin-panda/quality.yml?branch=main&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000"> | ||
| <img alt="Github release actions" src="https://img.shields.io/github/actions/workflow/status/chakra-ui/eslint-plugin-panda/quality.yml?branch=main&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000"> | ||
| </picture> | ||
| </a> | ||
| </p> | ||
|
|
||
| </div> | ||
|
|
||
| ## Getting Started | ||
|
|
||
| ### Installation | ||
|
|
||
| ```bash | ||
| 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: | ||
|
|
||
| ```json | ||
| { | ||
| "plugins": ["@pandacss"] | ||
| } | ||
| ``` | ||
|
|
||
| Then configure the rules you want to use under the rules section. | ||
|
|
||
| ```json | ||
| { | ||
| "rules": { | ||
| "@pandacss/no-debug": "error" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| You can also enable the `recommended` rules in extends: | ||
|
|
||
| ```diff | ||
| { | ||
| - "plugins": ["@pandacss"] | ||
| + "extends": ["plugin:@pandacss/recommended"] | ||
| } | ||
| ``` | ||
|
|
||
| Or enable all rules in extends: | ||
|
|
||
| ```diff | ||
| { | ||
| - "plugins": ["@pandacss"] | ||
| + "extends": ["plugin:@pandacss/all"] | ||
| } | ||
| ``` | ||
|
|
||
| > [!WARNING] | ||
| > This is not recommended. You should only enable the rules you need. | ||
| ## Rules | ||
|
|
||
| Rules with options are indicated with ⚙️. Rules which are fixable are indicated with 🔧. | ||
|
|
||
| Where rules are included in the configs `recommended`, or `all` it is indicated below. | ||
|
|
||
| - [`@pandacss/file-not-included`](docs/rules/file-not-included.md) `all`, `recommended` | ||
| - [`@pandacss/no-config-function-in-source`](docs/rules/no-config-function-in-source.md) 🔧 `all`, `recommended` | ||
| - [`@pandacss/no-debug`](docs/rules/no-debug.md) 🔧 `all`, `recommended` | ||
| - [`@pandacss/no-dynamic-styling`](docs/rules/no-dynamic-styling.md) `all`, `recommended` | ||
| - [`@pandacss/no-escape-hatch`](docs/rules/no-escape-hatch.md) 🔧 `all` | ||
| - [`@pandacss/no-hardcoded-color`](docs/rules/no-hardcoded-color.md) `all` | ||
| - [`@pandacss/no-invalid-token-paths`](docs/rules/no-invalid-token-paths.md) `all`, `recommended` | ||
| - [`@pandacss/no-property-renaming`](docs/rules/no-property-renaming.md) `all`, `recommended` | ||
| - [`@pandacss/no-shorthand-prop`](docs/rules/no-shorthand-prop.md) 🔧 `all` | ||
| - [`@pandacss/no-unsafe-token-fn-usage`](docs/rules/no-unsafe-token-fn-usage.md) 🔧 `all` | ||
| - [`@pandacss/prefer-atomic-properties`](docs/rules/prefer-atomic-properties.md) `all` | ||
|
|
||
| ## 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. | ||
|
|
||
| ```js filename=".eslintrc.(c)js" | ||
| const path = require('path') | ||
|
|
||
| module.exports = { | ||
| plugins: ['@pandacss'], | ||
| settings: { | ||
| '@pandacss/configPath': path.join('PATH-TO/panda.config.js'), | ||
| }, | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters