feat(no-physical-properties): detect textAlign physical values like "left"/"right" (#243)

Author: anubra266

Diff for: docs/rules/no-physical-properties.md

@@ -30,6 +30,20 @@ function App(){
   return <Circle _hover={{  borderBottom: 'solid 1px' }} />;
 }
 ```
+```js
+
+import { css } from './panda/css';
+
+const styles = css({ textAlign: 'left' });
+```
+```js
+
+import { Box } from './panda/jsx';
+
+function App(){
+  return <Box textAlign={"right"} />;
+}
+```
 
 ✔️ Examples of **correct** code:
 ```js
@@ -53,6 +67,20 @@ function App(){
   return <Circle _hover={{  borderBlockEnd: 'solid 1px' }} />;
 }
 ```
+```js
+
+import { css } from './panda/css';
+
+const styles = css({ textAlign: 'start' });
+```
+```js
+
+import { Box } from './panda/jsx';
+
+function App(){
+  return <Box textAlign={"end"} />;
+}
+```
 
 ## Resources
 

Diff for: plugin/src/rules/no-physical-properties.ts

@@ -1,22 +1,139 @@
 import { isRecipeVariant, isPandaAttribute, isPandaProp, resolveLonghand } from '../utils/helpers'
 import { type Rule, createRule } from '../utils'
-import { isIdentifier, isJSXIdentifier } from '../utils/nodes'
-import { physicalProperties } from '../utils/physical-properties'
-import type { TSESTree } from '@typescript-eslint/utils'
+import { isIdentifier, isJSXIdentifier, isLiteral, isJSXExpressionContainer } from '../utils/nodes'
+import { physicalProperties, physicalPropertyValues } from '../utils/physical-properties'
+import type { TSESTree, TSESLint } from '@typescript-eslint/utils'
+
+type CacheMap<K extends object, V> = WeakMap<K, V | undefined>
+type ValueNode = TSESTree.Property['value'] | TSESTree.JSXAttribute['value']
+type IdentifierNode = TSESTree.Identifier | TSESTree.JSXIdentifier
+type RuleContextType = TSESLint.RuleContext<keyof typeof MESSAGES, [{ whitelist: string[] }]>
 
 export const RULE_NAME = 'no-physical-properties'
 
+const MESSAGES = {
+  physical: 'Use logical property instead of {{physical}}. Prefer `{{logical}}`.',
+  physicalValue: 'Use logical value instead of {{physical}}. Prefer `{{logical}}`.',
+  replace: 'Replace `{{physical}}` with `{{logical}}`.',
+} as const
+
+class PropertyCache {
+  private longhandCache = new Map<string, string>()
+  private pandaPropCache: CacheMap<TSESTree.JSXAttribute, boolean> = new WeakMap()
+  private pandaAttributeCache: CacheMap<TSESTree.Property, boolean> = new WeakMap()
+  private recipeVariantCache: CacheMap<TSESTree.Property, boolean> = new WeakMap()
+
+  getLonghand(name: string, context: RuleContextType): string {
+    if (this.longhandCache.has(name)) {
+      return this.longhandCache.get(name)!
+    }
+    const longhand = resolveLonghand(name, context) ?? name
+    this.longhandCache.set(name, longhand)
+    return longhand
+  }
+
+  isPandaProp(node: TSESTree.JSXAttribute, context: RuleContextType): boolean {
+    if (this.pandaPropCache.has(node)) {
+      return this.pandaPropCache.get(node)!
+    }
+    const result = isPandaProp(node, context)
+    this.pandaPropCache.set(node, result)
+    return !!result
+  }
+
+  isPandaAttribute(node: TSESTree.Property, context: RuleContextType): boolean {
+    if (this.pandaAttributeCache.has(node)) {
+      return this.pandaAttributeCache.get(node)!
+    }
+    const result = isPandaAttribute(node, context)
+    this.pandaAttributeCache.set(node, result)
+    return !!result
+  }
+
+  isRecipeVariant(node: TSESTree.Property, context: RuleContextType): boolean {
+    if (this.recipeVariantCache.has(node)) {
+      return this.recipeVariantCache.get(node)!
+    }
+    const result = isRecipeVariant(node, context)
+    this.recipeVariantCache.set(node, result)
+    return !!result
+  }
+}
+
+const extractStringLiteralValue = (valueNode: ValueNode): string | null => {
+  if (isLiteral(valueNode) && typeof valueNode.value === 'string') {
+    return valueNode.value
+  }
+
+  if (
+    isJSXExpressionContainer(valueNode) &&
+    isLiteral(valueNode.expression) &&
+    typeof valueNode.expression.value === 'string'
+  ) {
+    return valueNode.expression.value
+  }
+
+  return null
+}
+
+const createPropertyReport = (
+  node: IdentifierNode,
+  longhandName: string,
+  logical: string,
+  context: RuleContextType,
+) => {
+  const physicalName = `\`${node.name}\`${longhandName !== node.name ? ` (resolved to \`${longhandName}\`)` : ''}`
+
+  context.report({
+    node,
+    messageId: 'physical',
+    data: { physical: physicalName, logical },
+    suggest: [
+      {
+        messageId: 'replace',
+        data: { physical: node.name, logical },
+        fix: (fixer: TSESLint.RuleFixer) => fixer.replaceText(node, logical),
+      },
+    ],
+  })
+}
+
+const createValueReport = (
+  valueNode: NonNullable<ValueNode>,
+  valueText: string,
+  logical: string,
+  context: RuleContextType,
+) => {
+  context.report({
+    node: valueNode,
+    messageId: 'physicalValue',
+    data: { physical: `"${valueText}"`, logical: `"${logical}"` },
+    suggest: [
+      {
+        messageId: 'replace',
+        data: { physical: `"${valueText}"`, logical: `"${logical}"` },
+        fix: (fixer: TSESLint.RuleFixer) => {
+          if (isLiteral(valueNode)) {
+            return fixer.replaceText(valueNode, `"${logical}"`)
+          }
+          if (isJSXExpressionContainer(valueNode) && isLiteral(valueNode.expression)) {
+            return fixer.replaceText(valueNode.expression, `"${logical}"`)
+          }
+          return null
+        },
+      },
+    ],
+  })
+}
+
 const rule: Rule = createRule({
   name: RULE_NAME,
   meta: {
     docs: {
       description:
         'Encourage the use of logical properties over physical properties to foster a responsive and adaptable user interface.',
     },
-    messages: {
-      physical: 'Use logical property instead of {{physical}}. Prefer `{{logical}}`.',
-      replace: 'Replace `{{physical}}` with `{{logical}}`.',
-    },
+    messages: MESSAGES,
     type: 'suggestion',
     hasSuggestions: true,
     schema: [
@@ -36,102 +153,54 @@ const rule: Rule = createRule({
       },
     ],
   },
-  defaultOptions: [
-    {
-      whitelist: [],
-    },
-  ],
+  defaultOptions: [{ whitelist: [] }],
   create(context) {
     const whitelist: string[] = context.options[0]?.whitelist ?? []
+    const cache = new PropertyCache()
 
-    // Cache for resolved longhand properties
-    const longhandCache = new Map<string, string>()
-
-    // Cache for helper functions
-    const pandaPropCache = new WeakMap<TSESTree.JSXAttribute, boolean | undefined>()
-    const pandaAttributeCache = new WeakMap<TSESTree.Property, boolean | undefined>()
-    const recipeVariantCache = new WeakMap<TSESTree.Property, boolean | undefined>()
-
-    const getLonghand = (name: string): string => {
-      if (longhandCache.has(name)) {
-        return longhandCache.get(name)!
-      }
-      const longhand = resolveLonghand(name, context) ?? name
-      longhandCache.set(name, longhand)
-      return longhand
-    }
+    const checkPropertyName = (node: IdentifierNode) => {
+      if (whitelist.includes(node.name)) return
+      const longhandName = cache.getLonghand(node.name, context)
+      if (!(longhandName in physicalProperties)) return
 
-    const isCachedPandaProp = (node: TSESTree.JSXAttribute): boolean => {
-      if (pandaPropCache.has(node)) {
-        return pandaPropCache.get(node)!
-      }
-      const result = isPandaProp(node, context)
-      pandaPropCache.set(node, result)
-      return !!result
+      const logical = physicalProperties[longhandName]
+      createPropertyReport(node, longhandName, logical, context)
     }
 
-    const isCachedPandaAttribute = (node: TSESTree.Property): boolean => {
-      if (pandaAttributeCache.has(node)) {
-        return pandaAttributeCache.get(node)!
-      }
-      const result = isPandaAttribute(node, context)
-      pandaAttributeCache.set(node, result)
-      return !!result
-    }
+    const checkPropertyValue = (keyNode: IdentifierNode, valueNode: NonNullable<ValueNode>): boolean => {
+      const propName = keyNode.name
+      if (!(propName in physicalPropertyValues)) return false
 
-    const isCachedRecipeVariant = (node: TSESTree.Property): boolean => {
-      if (recipeVariantCache.has(node)) {
-        return recipeVariantCache.get(node)!
-      }
-      const result = isRecipeVariant(node, context)
-      recipeVariantCache.set(node, result)
-      return !!result
-    }
+      const valueText = extractStringLiteralValue(valueNode)
+      if (valueText === null) return false
 
-    const sendReport = (node: TSESTree.Identifier | TSESTree.JSXIdentifier) => {
-      if (whitelist.includes(node.name)) return
-      const longhandName = getLonghand(node.name)
-      if (!(longhandName in physicalProperties)) return
+      const valueMap = physicalPropertyValues[propName]
+      if (!valueMap[valueText]) return false
 
-      const logical = physicalProperties[longhandName]
-      const physicalName = `\`${node.name}\`${longhandName !== node.name ? ` (resolved to \`${longhandName}\`)` : ''}`
-
-      context.report({
-        node,
-        messageId: 'physical',
-        data: {
-          physical: physicalName,
-          logical,
-        },
-        suggest: [
-          {
-            messageId: 'replace',
-            data: {
-              physical: node.name,
-              logical,
-            },
-            fix: (fixer) => {
-              return fixer.replaceText(node, logical)
-            },
-          },
-        ],
-      })
+      createValueReport(valueNode, valueText, valueMap[valueText], context)
+      return true
     }
 
     return {
       JSXAttribute(node: TSESTree.JSXAttribute) {
         if (!isJSXIdentifier(node.name)) return
-        if (!isCachedPandaProp(node)) return
+        if (!cache.isPandaProp(node, context)) return
 
-        sendReport(node.name)
+        checkPropertyName(node.name)
+        if (node.value) {
+          checkPropertyValue(node.name, node.value)
+        }
       },
 
       Property(node: TSESTree.Property) {
         if (!isIdentifier(node.key)) return
-        if (!isCachedPandaAttribute(node)) return
-        if (isCachedRecipeVariant(node)) return
+        if (!cache.isPandaAttribute(node, context)) return
+        if (cache.isRecipeVariant(node, context)) return
 
-        sendReport(node.key)
+        checkPropertyName(node.key)
+        if (node.value) {
+          checkPropertyValue(node.key, node.value)
+        }
       },
     }
   },

Diff for: plugin/src/utils/physical-properties.ts

@@ -32,3 +32,12 @@ export const physicalProperties: Record<string, string> = {
   top: 'insetBlockStart',
   bottom: 'insetBlockEnd',
 }
+
+// Map of property names to their physical values and corresponding logical values
+export const physicalPropertyValues: Record<string, Record<string, string>> = {
+  // text-align physical values mapped to logical values
+  textAlign: {
+    left: 'start',
+    right: 'end',
+  },
+}