update plugin

Author: anubra266

.changeset/light-insects-know.md

@@ -0,0 +1,5 @@
+---
+"@pandacss/eslint-plugin": patch
+---
+
+- Rename `no-shorthand-prop` rule to `prefer-longhand-properties`

README.md

@@ -1,109 +1,109 @@
-<!-- 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
-
-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
+
+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'),
+  },
+}
+```

fixture/package.json

@@ -10,15 +10,15 @@
     "deps": "pnpm up '@pandacss/*' --latest"
   },
   "devDependencies": {
-    "@pandacss/config": "^0.29.0",
-    "@pandacss/core": "^0.29.0",
-    "@pandacss/generator": "^0.29.0",
-    "@pandacss/node": "^0.29.0",
-    "@pandacss/preset-base": "^0.29.0",
-    "@pandacss/preset-panda": "^0.29.0",
-    "@pandacss/shared": "^0.29.0",
-    "@pandacss/token-dictionary": "^0.29.0",
-    "@pandacss/types": "^0.29.0",
+    "@pandacss/config": "^0.30.1",
+    "@pandacss/core": "^0.30.1",
+    "@pandacss/generator": "^0.30.1",
+    "@pandacss/node": "^0.30.1",
+    "@pandacss/preset-base": "^0.30.1",
+    "@pandacss/preset-panda": "^0.30.1",
+    "@pandacss/shared": "^0.30.1",
+    "@pandacss/token-dictionary": "^0.30.1",
+    "@pandacss/types": "^0.30.1",
     "postcss": "^8.4.33"
   }
 }

plugin/package.json

@@ -33,10 +33,10 @@
     "dist"
   ],
   "dependencies": {
-    "@pandacss/config": "^0.29.1",
-    "@pandacss/generator": "^0.29.1",
-    "@pandacss/node": "^0.29.1",
-    "@pandacss/shared": "^0.29.1",
+    "@pandacss/config": "^0.30.1",
+    "@pandacss/generator": "^0.30.1",
+    "@pandacss/node": "^0.30.1",
+    "@pandacss/shared": "^0.30.1",
     "@typescript-eslint/utils": "^6.19.1",
     "hookable": "^5.5.3",
     "synckit": "^0.9.0"

plugin/src/rules/index.ts

@@ -6,7 +6,7 @@ import noEscapeHatch, { RULE_NAME as NoEscapeHatch } from './no-escape-hatch'
 import noHardCodedColor, { RULE_NAME as NoHardCodedColor } from './no-hardcoded-color'
 import noInvalidTokenPaths, { RULE_NAME as NoInvalidTokenPaths } from './no-invalid-token-paths'
 import noPropertyRenaming, { RULE_NAME as NoPropertyRenaming } from './no-property-renaming'
-import noShorthandProp, { RULE_NAME as NoShorthandProp } from './no-shorthand-prop'
+import preferLonghandProperties, { RULE_NAME as PreferLonghandProperties } from './prefer-longhand-properties'
 import noUnsafeTokenUsage, { RULE_NAME as NoUnsafeTokenUsage } from './no-unsafe-token-fn-usage'
 import preferAtomicProperties, { RULE_NAME as PreferAtomicProperties } from './prefer-atomic-properties'
 
@@ -19,7 +19,7 @@ export const rules = {
   [NoHardCodedColor]: noHardCodedColor,
   [NoInvalidTokenPaths]: noInvalidTokenPaths,
   [NoPropertyRenaming]: noPropertyRenaming,
-  [NoShorthandProp]: noShorthandProp,
+  [PreferLonghandProperties]: preferLonghandProperties,
   [NoUnsafeTokenUsage]: noUnsafeTokenUsage,
   [PreferAtomicProperties]: preferAtomicProperties,
 } as any

plugin/src/rules/prefer-atomic-properties.ts

@@ -1,6 +1,6 @@
 import { isPandaAttribute, isPandaProp, isValidProperty, resolveShorthand } from '../utils/helpers'
 import { type Rule, createRule } from '../utils'
-import { shorthandProperties } from '../utils/shorthand-properties'
+import { compositeProperties } from '../utils/composite-properties'
 import { isIdentifier, isJSXIdentifier } from '../utils/nodes'
 
 export const RULE_NAME = 'prefer-atomic-properties'
@@ -20,16 +20,16 @@ const rule: Rule = createRule({
   defaultOptions: [],
   create(context) {
     const resolveCompositeProperty = (name: string) => {
-      if (Object.hasOwn(shorthandProperties, name)) return name
+      if (Object.hasOwn(compositeProperties, name)) return name
 
       const longhand = resolveShorthand(name, context)
-      if (isValidProperty(longhand, context) && Object.hasOwn(shorthandProperties, longhand)) return longhand
+      if (isValidProperty(longhand, context) && Object.hasOwn(compositeProperties, longhand)) return longhand
     }
 
     const sendReport = (node: any, name: string) => {
       const cpd = resolveCompositeProperty(name)!
 
-      const atomics = shorthandProperties[cpd].map((name) => `\`${name}\``).join(',\n')
+      const atomics = compositeProperties[cpd].map((name) => `\`${name}\``).join(',\n')
 
       return context.report({
         node,

plugin/src/rules/no-shorthand-prop.ts renamed to plugin/src/rules/prefer-longhand-properties.ts

@@ -1,4 +1,4 @@
-export const shorthandProperties: Record<string, string[]> = {
+export const compositeProperties: Record<string, string[]> = {
   animation: [
     'animationName',
     'animationDuration',

plugin/src/utils/shorthand-properties.ts renamed to plugin/src/utils/composite-properties.ts

@@ -245,7 +245,7 @@ export const extractTokens = (value: string) => {
 export const getInvalidTokens = (value: string, context: RuleContext<any, any>) => {
   const tokens = extractTokens(value)
   if (!tokens.length) return []
-  return syncAction('filterInvalidTokenz', getSyncOpts(context), tokens)
+  return syncAction('filterInvalidTokens', getSyncOpts(context), tokens)
 }
 
 export const getExtendWarnings = (context: RuleContext<any, any>) => {

plugin/src/utils/helpers.ts

@@ -58,12 +58,12 @@ async function getExtendWarnings(): Promise<string[]> {
   return Array.from(warnings)
 }
 
-async function filterInvalidTokenz(ctx: PandaContext, paths: string[]): Promise<string[]> {
-  return paths.filter((path) => !ctx.utility.tokens.get(path))
+async function filterInvalidTokens(ctx: PandaContext, paths: string[]): Promise<string[]> {
+  return paths.filter((path) => !ctx.utility.tokens.view.get(path))
 }
 
 async function isColorToken(ctx: PandaContext, value: string): Promise<boolean> {
-  return !!ctx.utility.tokens.values.get('colors')?.get(value)
+  return !!ctx.utility.tokens.view.categoryMap.get('colors')?.get(value)
 }
 
 async function isColorAttribute(ctx: PandaContext, _attr: string): Promise<boolean> {
@@ -139,7 +139,7 @@ type Opts = {
 }
 
 export function runAsync(action: 'getExtendWarnings', opts: Opts): Promise<string[]>
-export function runAsync(action: 'filterInvalidTokenz', opts: Opts, paths: string[]): Promise<string[]>
+export function runAsync(action: 'filterInvalidTokens', opts: Opts, paths: string[]): Promise<string[]>
 export function runAsync(action: 'isColorToken', opts: Opts, value: string): Promise<boolean>
 export function runAsync(action: 'isColorAttribute', opts: Opts, attr: string): Promise<boolean>
 export function runAsync(action: 'isConfigFile', opts: Opts, fileName: string): Promise<string>
@@ -178,16 +178,16 @@ export async function runAsync(action: string, opts: Opts, ...args: any): Promis
     case 'isColorToken':
       // @ts-expect-error cast
       return isColorToken(ctx, ...args)
-    case 'filterInvalidTokenz':
+    case 'filterInvalidTokens':
       // @ts-expect-error cast
-      return filterInvalidTokenz(ctx, ...args)
+      return filterInvalidTokens(ctx, ...args)
     case 'getExtendWarnings':
       return getExtendWarnings()
   }
 }
 
 export function run(action: 'getExtendWarnings', opts: Opts): string[]
-export function run(action: 'filterInvalidTokenz', opts: Opts, paths: string[]): string[]
+export function run(action: 'filterInvalidTokens', opts: Opts, paths: string[]): string[]
 export function run(action: 'isColorToken', opts: Opts, value: string): boolean
 export function run(action: 'isColorAttribute', opts: Opts, attr: string): boolean
 export function run(action: 'isConfigFile', opts: Opts): boolean