feat: no-deprecated-tokens

Author: anubra266

README.md

@@ -117,6 +117,7 @@ Where rules are included in the configs `recommended`, or `all` it is indicated
 | [`@pandacss/file-not-included`](docs/rules/file-not-included.md)                         | ✔️            |
 | [`@pandacss/no-config-function-in-source`](docs/rules/no-config-function-in-source.md)   | ✔️            |
 | [`@pandacss/no-debug`](docs/rules/no-debug.md)                                           | ✔️            |
+| [`@pandacss/no-deprecated-tokens`](docs/rules/no-deprecated-tokens.md)                   | ✔️            |
 | [`@pandacss/no-dynamic-styling`](docs/rules/no-dynamic-styling.md)                       | ✔️            |
 | [`@pandacss/no-escape-hatch`](docs/rules/no-escape-hatch.md)                             |               |
 | [`@pandacss/no-hardcoded-color`](docs/rules/no-hardcoded-color.md) ⚙️                    | ✔️            |

docs/rules/no-deprecated-tokens.md

@@ -0,0 +1,31 @@
+[//]: # (This file is generated by eslint-docgen. Do not edit it directly.)
+
+# no-deprecated-tokens
+
+Disallow the use of deprecated tokens within token function syntax.
+
+📋 This rule is enabled in `plugin:@pandacss/all`.
+
+📋 This rule is enabled in `plugin:@pandacss/recommended`.
+
+## Rule details
+
+❌ Examples of **incorrect** code:
+```js
+import { css } from './panda/css';
+
+// Assumes that the token is deprecated
+const styles = css({ color: 'red.400' })
+```
+
+✔️ Examples of **correct** code:
+```js
+import { css } from './panda/css';
+
+const styles = css({ color: 'red.100' })
+```
+
+## Resources
+
+* [Rule source](/plugin/src/rules/no-deprecated-tokens.ts)
+* [Test source](/plugin/tests/no-deprecated-tokens.test.ts)

fixture/src/create-context.ts

@@ -4,6 +4,7 @@ import { PandaContext } from '@pandacss/node'
 import { stringifyJson, parseJson } from '@pandacss/shared'
 import type { Config, LoadConfigResult, UserConfig } from '@pandacss/types'
 import { fixturePreset } from './config'
+import v9Config from '../../sandbox/v9/panda.config'
 
 const config: UserConfig = {
   ...fixturePreset,
@@ -34,9 +35,7 @@ export const createGeneratorContext = (userConfig?: Config) => {
 }
 
 export const createContext = (userConfig?: Config) => {
-  const resolvedConfig = (
-    userConfig ? mergeConfigs([fixtureDefaults.config, userConfig]) : fixtureDefaults.config
-  ) as UserConfig
+  const resolvedConfig = mergeConfigs([fixtureDefaults.config, v9Config, { importMap: './panda' }]) as UserConfig
 
   return new PandaContext({
     ...fixtureDefaults,

plugin/src/configs/recommended.ts

@@ -12,5 +12,6 @@ export default {
     '@pandacss/no-invalid-token-paths': 'error',
     '@pandacss/no-property-renaming': 'warn',
     '@pandacss/no-unsafe-token-fn-usage': 'warn',
+    '@pandacss/no-deprecated-tokens': 'warn',
   },
 }

plugin/src/rules/index.ts

@@ -1,6 +1,7 @@
 import fileNotIncluded, { RULE_NAME as FileNotIncluded } from './file-not-included'
 import noConfigunctionInSource, { RULE_NAME as NoConfigunctionInSource } from './no-config-function-in-source'
 import noDebug, { RULE_NAME as NoDebug } from './no-debug'
+import noDeprecatedTokens, { RULE_NAME as NoDeprecatedTokens } from './no-deprecated-tokens'
 import noDynamicStyling, { RULE_NAME as NoDynamicStyling } from './no-dynamic-styling'
 import noEscapeHatch, { RULE_NAME as NoEscapeHatch } from './no-escape-hatch'
 import noHardCodedColor, { RULE_NAME as NoHardCodedColor } from './no-hardcoded-color'
@@ -21,6 +22,7 @@ export const rules = {
   [FileNotIncluded]: fileNotIncluded,
   [NoConfigunctionInSource]: noConfigunctionInSource,
   [NoDebug]: noDebug,
+  [NoDeprecatedTokens]: noDeprecatedTokens,
   [NoDynamicStyling]: noDynamicStyling,
   [NoEscapeHatch]: noEscapeHatch,
   [NoHardCodedColor]: noHardCodedColor,

plugin/src/rules/no-deprecated-tokens.ts

@@ -0,0 +1,147 @@
+import {
+  getDeprecatedTokens,
+  getTaggedTemplateCaller,
+  isPandaAttribute,
+  isPandaIsh,
+  isPandaProp,
+  isRecipeVariant,
+} from '../utils/helpers'
+import { type Rule, createRule } from '../utils'
+import { AST_NODE_TYPES, TSESTree } from '@typescript-eslint/utils'
+import { isNodeOfTypes } from '@typescript-eslint/utils/ast-utils'
+import { isIdentifier, isJSXExpressionContainer, isLiteral, isTemplateLiteral } from '../utils/nodes'
+import type { DeprecatedToken } from '../utils/worker'
+
+export const RULE_NAME = 'no-deprecated-tokens'
+
+const rule: Rule = createRule({
+  name: RULE_NAME,
+  meta: {
+    docs: {
+      description: 'Disallow the use of deprecated tokens within token function syntax.',
+    },
+    messages: {
+      noDeprecatedTokenPaths: '`{{token}}` is a deprecated token.',
+      noDeprecatedTokens: '`{{token}}` is a deprecated {{category}} token.',
+    },
+    type: 'problem',
+    schema: [],
+  },
+  defaultOptions: [],
+  create(context) {
+    // Cache for deprecated tokens to avoid redundant computations
+    const deprecatedTokensCache = new Map<string, DeprecatedToken[]>()
+
+    const sendReport = (prop: string, node: TSESTree.Node, value: string | undefined) => {
+      if (!value) return
+
+      let tokens: DeprecatedToken[] | undefined = deprecatedTokensCache.get(value)
+      if (!tokens) {
+        tokens = getDeprecatedTokens(prop, value, context)
+        deprecatedTokensCache.set(value, tokens)
+      }
+
+      if (tokens.length === 0) return
+
+      tokens.forEach((token) => {
+        context.report({
+          node,
+          messageId: typeof token === 'string' ? 'noDeprecatedTokenPaths' : 'noDeprecatedTokens',
+          data: {
+            token: typeof token === 'string' ? token : token.value,
+            category: typeof token === 'string' ? undefined : token.category,
+          },
+        })
+      })
+    }
+
+    const handleLiteralOrTemplate = (prop: string, node: TSESTree.Node | undefined) => {
+      if (!node) return
+
+      if (isLiteral(node)) {
+        const value = node.value?.toString()
+        sendReport(prop, node, value)
+      } else if (isTemplateLiteral(node) && node.expressions.length === 0) {
+        const value = node.quasis[0].value.raw
+        sendReport(prop, node.quasis[0], value)
+      }
+    }
+
+    return {
+      JSXAttribute(node: TSESTree.JSXAttribute) {
+        if (!node.value || !isPandaProp(node, context)) return
+
+        const prop = node.name.name as string
+
+        if (isLiteral(node.value)) {
+          handleLiteralOrTemplate(prop, node.value)
+        } else if (isJSXExpressionContainer(node.value)) {
+          handleLiteralOrTemplate(prop, node.value.expression)
+        }
+      },
+
+      Property(node: TSESTree.Property) {
+        if (
+          !isIdentifier(node.key) ||
+          !isNodeOfTypes([AST_NODE_TYPES.Literal, AST_NODE_TYPES.TemplateLiteral])(node.value) ||
+          !isPandaAttribute(node, context) ||
+          isRecipeVariant(node, context)
+        ) {
+          return
+        }
+
+        const prop = node.key.name as string
+
+        handleLiteralOrTemplate(prop, node.value)
+      },
+
+      TaggedTemplateExpression(node: TSESTree.TaggedTemplateExpression) {
+        const caller = getTaggedTemplateCaller(node)
+        if (!caller || !isPandaIsh(caller, context)) return
+
+        const quasis = node.quasi.quasis
+        quasis.forEach((quasi) => {
+          const styles = quasi.value.raw
+          if (!styles) return
+
+          // Use the same pattern as sendReport function
+          let tokens: DeprecatedToken[] | undefined = deprecatedTokensCache.get(styles)
+          if (!tokens) {
+            // For template literals, we don't have a specific prop, so we use an empty string
+            tokens = getDeprecatedTokens('', styles, context)
+            deprecatedTokensCache.set(styles, tokens)
+          }
+
+          if (tokens.length === 0) return
+
+          tokens.forEach((token) => {
+            const tokenValue = typeof token === 'string' ? token : token.value
+            let index = styles.indexOf(tokenValue)
+
+            while (index !== -1) {
+              const start = quasi.range[0] + index + 1 // +1 for the backtick
+              const end = start + tokenValue.length
+
+              context.report({
+                loc: {
+                  start: context.sourceCode.getLocFromIndex(start),
+                  end: context.sourceCode.getLocFromIndex(end),
+                },
+                messageId: typeof token === 'string' ? 'noDeprecatedTokenPaths' : 'noDeprecatedTokens',
+                data: {
+                  token: tokenValue,
+                  category: typeof token === 'string' ? undefined : token.category,
+                },
+              })
+
+              // Check for other occurrences of the deprecated token
+              index = styles.indexOf(tokenValue, index + tokenValue.length)
+            }
+          })
+        })
+      },
+    }
+  },
+})
+
+export default rule

plugin/src/utils/helpers.ts

@@ -18,6 +18,7 @@ import {
   isVariableDeclarator,
   type Node,
 } from './nodes'
+import type { DeprecatedToken } from './worker'
 
 export const getAncestor = <N extends Node>(ofType: (node: Node) => node is N, for_: Node): N | undefined => {
   let current: Node | undefined = for_.parent
@@ -68,7 +69,7 @@ const _getImports = (context: RuleContext<any, any>) => {
   const specifiers = getImportSpecifiers(context)
 
   const imports: ImportResult[] = specifiers.map(({ specifier, mod }) => ({
-    name: specifier.imported.name,
+    name: (specifier.imported as any).name,
     alias: specifier.local.name,
     mod,
   }))
@@ -244,9 +245,6 @@ export const isColorToken = (value: string | undefined, context: RuleContext<any
   return syncAction('isColorToken', getSyncOpts(context), value)
 }
 
-// Caching invalid tokens to avoid redundant computations
-const invalidTokensCache = new Map<string, string[]>()
-
 export const extractTokens = (value: string) => {
   const regex = /token\(([^"'(),]+)(?:,\s*([^"'(),]+))?\)|\{([^{\r\n}]+)\}/g
   const matches = []
@@ -268,6 +266,9 @@ export const extractTokens = (value: string) => {
   return matches.filter(Boolean)
 }
 
+// Caching invalid tokens to avoid redundant computations
+const invalidTokensCache = new Map<string, string[]>()
+
 export const getInvalidTokens = (value: string, context: RuleContext<any, any>) => {
   if (invalidTokensCache.has(value)) {
     return invalidTokensCache.get(value)!
@@ -281,6 +282,28 @@ export const getInvalidTokens = (value: string, context: RuleContext<any, any>)
   return invalidTokens
 }
 
+// Caching deprecated tokens to avoid redundant computations
+const deprecatedTokensCache = new Map<string, DeprecatedToken[]>()
+
+export const getDeprecatedTokens = (prop: string, value: string, context: RuleContext<any, any>) => {
+  const propCategory = syncAction('getPropCategory', getSyncOpts(context), prop)
+
+  const tokens = extractTokens(value)
+
+  if (!propCategory && !tokens.length) return []
+
+  const values = tokens.length ? tokens : [{ category: propCategory, value: value.split('/')[0] }]
+
+  if (deprecatedTokensCache.has(value)) {
+    return deprecatedTokensCache.get(value)!
+  }
+
+  const deprecatedTokens = syncAction('filterDeprecatedTokens', getSyncOpts(context), values)
+  deprecatedTokensCache.set(value, deprecatedTokens)
+
+  return deprecatedTokens
+}
+
 export const getTokenImport = (context: RuleContext<any, any>) => {
   const imports = _getImports(context)
   return imports.find((imp) => imp.name === 'token')

plugin/src/utils/worker.ts

@@ -26,7 +26,7 @@ async function _getContext(configPath: string | undefined) {
 export async function getContext(opts: Opts) {
   if (process.env.NODE_ENV === 'test') {
     configPath = opts.configPath
-    const ctx = createContext({ importMap: './panda' }) as unknown as PandaContext
+    const ctx = createContext() as unknown as PandaContext
     ctx.getFiles = () => ['App.tsx']
     return ctx
   } else {
@@ -45,15 +45,34 @@ async function filterInvalidTokens(ctx: PandaContext, paths: string[]): Promise<
   return paths.filter((path) => !ctx.utility.tokens.view.get(path))
 }
 
+export type DeprecatedToken =
+  | string
+  | {
+      category: string
+      value: string
+    }
+
+async function filterDeprecatedTokens(ctx: PandaContext, tokens: DeprecatedToken[]): Promise<DeprecatedToken[]> {
+  return tokens.filter((token) => {
+    const value = typeof token === 'string' ? token : token.category + '.' + token.value
+    return ctx.utility.tokens.isDeprecated(value)
+  })
+}
+
 async function isColorToken(ctx: PandaContext, value: string): Promise<boolean> {
   return !!ctx.utility.tokens.view.categoryMap.get('colors')?.get(value)
 }
 
-async function isColorAttribute(ctx: PandaContext, _attr: string): Promise<boolean> {
+async function getPropCategory(ctx: PandaContext, _attr: string) {
   const longhand = await resolveLongHand(ctx, _attr)
   const attr = longhand || _attr
   const attrConfig = ctx.utility.config[attr]
-  return attrConfig?.values === 'colors'
+  return typeof attrConfig?.values === 'string' ? attrConfig.values : undefined
+}
+
+async function isColorAttribute(ctx: PandaContext, _attr: string): Promise<boolean> {
+  const category = await getPropCategory(ctx, _attr)
+  return category === 'colors'
 }
 
 const arePathsEqual = (path1: string, path2: string) => {
@@ -121,6 +140,12 @@ export function runAsync(action: 'resolveLongHand', opts: Opts, name: string): P
 export function runAsync(action: 'isValidProperty', opts: Opts, name: string, patternName?: string): Promise<boolean>
 export function runAsync(action: 'matchFile', opts: Opts, name: string, imports: ImportResult[]): Promise<boolean>
 export function runAsync(action: 'matchImports', opts: Opts, result: MatchImportResult): Promise<boolean>
+export function runAsync(action: 'getPropCategory', opts: Opts, prop: string): Promise<string>
+export function runAsync(
+  action: 'filterDeprecatedTokens',
+  opts: Opts,
+  tokens: DeprecatedToken[],
+): Promise<DeprecatedToken[]>
 export async function runAsync(action: string, opts: Opts, ...args: any): Promise<any> {
   const ctx = await getContext(opts)
 
@@ -151,6 +176,12 @@ export async function runAsync(action: string, opts: Opts, ...args: any): Promis
     case 'filterInvalidTokens':
       // @ts-expect-error cast
       return filterInvalidTokens(ctx, ...args)
+    case 'getPropCategory':
+      // @ts-expect-error cast
+      return getPropCategory(ctx, ...args)
+    case 'filterDeprecatedTokens':
+      // @ts-expect-error cast
+      return filterDeprecatedTokens(ctx, ...args)
   }
 }
 
@@ -163,6 +194,8 @@ export function run(action: 'resolveLongHand', opts: Opts, name: string): string
 export function run(action: 'isValidProperty', opts: Opts, name: string, patternName?: string): boolean
 export function run(action: 'matchFile', opts: Opts, name: string, imports: ImportResult[]): boolean
 export function run(action: 'matchImports', opts: Opts, result: MatchImportResult): boolean
+export function run(action: 'getPropCategory', opts: Opts, prop: string): string
+export function run(action: 'filterDeprecatedTokens', opts: Opts, tokens: DeprecatedToken[]): DeprecatedToken[]
 export function run(action: string, opts: Opts, ...args: any[]): any {
   // @ts-expect-error cast
   return runAsync(action, opts, ...args)

plugin/test-utils.ts

@@ -12,4 +12,4 @@ const baseTesterConfig = {
 }
 
 export const tester = new RuleTester(baseTesterConfig)
-export const eslintTester = new ERuleTester(baseTesterConfig)
+export const eslintTester = new ERuleTester(baseTesterConfig as any)