Fix linting on no panda attributes

Author: anubra266

plugin/src/rules/no-config-function-in-source.ts

@@ -21,11 +21,10 @@ const rule: Rule = createRule({
   create(context) {
     return {
       CallExpression(node) {
+        if (!isValidFile(context)) return
         if (!isIdentifier(node.callee)) return
         if (!CONFIG_FUNCTIONS.includes(node.callee.name)) return
 
-        if (!isValidFile(context)) return
-
         context.report({
           node,
           messageId: 'configFunction',

plugin/src/rules/no-debug.ts

@@ -1,4 +1,4 @@
-import { isIdentifier } from '../utils/nodes'
+import { isIdentifier, isJSXIdentifier } from '../utils/nodes'
 import { type Rule, createRule } from '../utils'
 import { isPandaAttribute, isPandaProp } from '../utils/helpers'
 
@@ -20,20 +20,19 @@ const rule: Rule = createRule({
   defaultOptions: [],
   create(context) {
     return {
-      JSXIdentifier(node) {
-        if (node.name !== 'debug') return
+      JSXAttribute(node) {
+        if (!isJSXIdentifier(node.name) || node.name.name !== 'debug') return
         if (!isPandaProp(node, context)) return
 
         context.report({
           node,
           messageId: 'debug',
-          fix: (fixer) => fixer.remove(node.parent),
+          fix: (fixer) => fixer.remove(node),
         })
       },
 
       Property(node) {
         if (!isIdentifier(node.key) || node.key.name !== 'debug') return
-
         if (!isPandaAttribute(node, context)) return
 
         context.report({

plugin/src/rules/no-dynamic-styling.ts

@@ -33,7 +33,7 @@ const rule: Rule = createRule({
         )
           return
 
-        if (!isPandaProp(node.name, context)) return
+        if (!isPandaProp(node, context)) return
 
         context.report({
           node: node.value,

plugin/src/rules/no-shorthand-prop.ts

@@ -1,6 +1,6 @@
 import { isPandaAttribute, isPandaProp, resolveLonghand } from '../utils/helpers'
 import { type Rule, createRule } from '../utils'
-import { isIdentifier } from '../utils/nodes'
+import { isIdentifier, isJSXIdentifier } from '../utils/nodes'
 
 export const RULE_NAME = 'no-shorthand-prop'
 
@@ -37,12 +37,14 @@ const rule: Rule = createRule({
     }
 
     return {
-      JSXIdentifier(node) {
+      JSXAttribute(node) {
+        if (!isJSXIdentifier(node.name)) return
         if (!isPandaProp(node, context)) return
-        const longhand = resolveLonghand(node.name, context)
+
+        const longhand = resolveLonghand(node.name.name, context)
         if (!longhand) return
 
-        sendReport(node, node.name)
+        sendReport(node.name, node.name.name)
       },
 
       Property(node) {

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

@@ -1,7 +1,7 @@
 import { isPandaAttribute, isPandaProp, isValidProperty, resolveShorthand } from '../utils/helpers'
 import { type Rule, createRule } from '../utils'
 import { shorthandProperties } from '../utils/shorthand-properties'
-import { isIdentifier } from '../utils/nodes'
+import { isIdentifier, isJSXIdentifier } from '../utils/nodes'
 
 export const RULE_NAME = 'prefer-atomic-properties'
 
@@ -42,12 +42,14 @@ const rule: Rule = createRule({
     }
 
     return {
-      JSXIdentifier(node) {
+      JSXAttribute(node) {
+        if (!isJSXIdentifier(node.name)) return
         if (!isPandaProp(node, context)) return
-        const cpd = resolveCompositeProperty(node.name)
+
+        const cpd = resolveCompositeProperty(node.name.name)
         if (!cpd) return
 
-        sendReport(node, node.name)
+        sendReport(node, node.name.name)
       },
 
       Property(node) {

plugin/src/utils/helpers.ts

@@ -125,6 +125,10 @@ export const isValidFile = (context: RuleContext<any, any>) => {
   return syncAction('isValidFile', getSyncOpts(context))
 }
 
+export const isConfigFile = (context: RuleContext<any, any>) => {
+  return syncAction('isConfigFile', getSyncOpts(context))
+}
+
 export const isValidProperty = (name: string, context: RuleContext<any, any>) => {
   return syncAction('isValidProperty', getSyncOpts(context), name)
 }
@@ -134,7 +138,11 @@ export const isPandaImport = (node: TSESTree.ImportDeclaration, context: RuleCon
   return imports.some((imp) => imp.mod === node.source.value)
 }
 
-export const isPandaProp = <T extends Node>(node: T, context: RuleContext<any, any>) => {
+export const isPandaProp = (node: TSESTree.JSXAttribute, context: RuleContext<any, any>) => {
+  // Ensure prop is a styled prop
+  const prop = node.name.name
+  if (typeof prop !== 'string' || !isValidProperty(prop, context)) return
+
   const jsxAncestor = getAncestor(isJSXOpeningElement, node)
 
   if (!jsxAncestor) return
@@ -149,10 +157,11 @@ export const isPandaProp = <T extends Node>(node: T, context: RuleContext<any, a
 
   // Ensure component is a panda component
   if (!isPandaIsh(jsxAncestor.name.name, context) && !isLocalStyledFactory(jsxAncestor, context)) return
+
   return true
 }
 
-export const isPandaAttribute = <T extends Node>(node: T, context: RuleContext<any, any>) => {
+export const isPandaAttribute = (node: TSESTree.Property, context: RuleContext<any, any>) => {
   const callAncestor = getAncestor(isCallExpression, node)
 
   // Object could be in JSX prop value i.e css prop or a pseudo
@@ -161,12 +170,17 @@ export const isPandaAttribute = <T extends Node>(node: T, context: RuleContext<a
     const jsxAttrAncestor = getAncestor(isJSXAttribute, node)
 
     if (!jsxExprAncestor || !jsxAttrAncestor) return
-    if (!isPandaProp(jsxAttrAncestor.name, context)) return
+    if (!isPandaProp(jsxAttrAncestor, context)) return
     if (!isValidStyledProp(jsxAttrAncestor.name, context)) return
 
     return true
   }
 
+  // Ensure attribute is a styled attribute
+  if (!isIdentifier(node.key)) return
+  const attr = node.key.name
+  if (!isValidProperty(attr, context)) return
+
   // E.g. css({...})
   if (isIdentifier(callAncestor.callee)) {
     return isPandaIsh(callAncestor.callee.name, context)
@@ -224,6 +238,10 @@ export const getInvalidTokens = (value: string, context: RuleContext<any, any>)
   return syncAction('filterInvalidTokenz', getSyncOpts(context), tokens)
 }
 
+export const getExtendWarnings = (context: RuleContext<any, any>) => {
+  return syncAction('getExtendWarnings', getSyncOpts(context))
+}
+
 export const getTokenImport = (context: RuleContext<any, any>) => {
   const imports = _getImports(context)
   return imports.find((imp) => imp.name === 'token')

sandbox/src/App.tsx

@@ -36,7 +36,7 @@ function App() {
 
   const color = 'red'
   const circleSize = '4'
-  const text = '4px'
+  const ta = 'left'
 
   return (
     <div
@@ -48,9 +48,10 @@ function App() {
         color: '#111',
         backgroundColor: color,
         content: "['escape hatch']",
-        textStyle: text,
+        textAlign: ta,
       })}
     >
+      <panda.a href={`mailto:${1}`} />
       <Circle size={circleSize} />
       <HStack gap="40px" debug>
         <div className={className}>Element 1</div>