diff --git a/.github/banner.png b/.github/banner.png index 0033e07..13dad14 100644 Binary files a/.github/banner.png and b/.github/banner.png differ diff --git a/README.md b/README.md index 5ac6ca9..13cdf25 100644 --- a/README.md +++ b/README.md @@ -1,111 +1,111 @@ - -
-
- -

- - - Panda CSS - - -

-

ESLint plugin for Panda CSS

- -

- - - - - Github release actions - - -

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

+ + + Panda CSS + + +

+

ESLint plugin for Panda CSS

+ +

+ + + + + Github release actions + + +

+ +
+ +## 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'), + }, +} +``` diff --git a/README.md.template b/README.md.template index b6b4184..003a35e 100644 --- a/README.md.template +++ b/README.md.template @@ -4,7 +4,7 @@

- Panda CSS + Panda CSS

diff --git a/package.json b/package.json index 52f54eb..99ea942 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "build": "pnpm -r --parallel build", "test": "vitest run", "docs": "rm -rf docs/rules && DOCGEN=1 vitest run && node tools/build-readme.js", + "readme": "DOCGEN=1 node tools/build-readme.js", "deps": "pnpm -r --parallel deps", "lint": "eslint . --ext .ts", "prettier": "prettier --check .",