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

This commit adds detection for physical text alignment values ("left"/"right")
in the no-physical-properties rule and suggests using logical values
("start"/"end") instead for better RTL language support.

- Add physicalPropertyValues mapping to track property-value pairs
- Implement extractStringLiteralValue utility function to handle both
  regular literals and JSX expression containers
- Extend test coverage to include textAlign cases with both literal types

Author: azu

plugin/src/rules/no-physical-properties.ts

@@ -1,7 +1,7 @@
 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 { isIdentifier, isJSXIdentifier, isLiteral, isJSXExpressionContainer } from '../utils/nodes'
+import { physicalProperties, physicalPropertyValues } from '../utils/physical-properties'
 import type { TSESTree } from '@typescript-eslint/utils'
 
 export const RULE_NAME = 'no-physical-properties'
@@ -15,6 +15,7 @@ const rule: Rule = createRule({
     },
     messages: {
       physical: 'Use logical property instead of {{physical}}. Prefer `{{logical}}`.',
+      physicalValue: 'Use logical value instead of {{physical}}. Prefer `{{logical}}`.',
       replace: 'Replace `{{physical}}` with `{{logical}}`.',
     },
     type: 'suggestion',
@@ -52,6 +53,32 @@ const rule: Rule = createRule({
     const pandaAttributeCache = new WeakMap<TSESTree.Property, boolean | undefined>()
     const recipeVariantCache = new WeakMap<TSESTree.Property, boolean | undefined>()
 
+    /**
+     * Extract string literal value from node
+     * @param valueNode The value node
+     * @returns String literal value, or null if not found
+     */
+    const extractStringLiteralValue = (
+      valueNode: TSESTree.Property['value'] | TSESTree.JSXAttribute['value'],
+    ): string | null => {
+      // Regular literal value (e.g., "left")
+      if (isLiteral(valueNode) && typeof valueNode.value === 'string') {
+        return valueNode.value
+      }
+
+      // Literal value in JSX expression container (e.g., {"left"})
+      if (
+        isJSXExpressionContainer(valueNode) &&
+        isLiteral(valueNode.expression) &&
+        typeof valueNode.expression.value === 'string'
+      ) {
+        return valueNode.expression.value
+      }
+
+      // Not a string literal
+      return null
+    }
+
     const getLonghand = (name: string): string => {
       if (longhandCache.has(name)) {
         return longhandCache.get(name)!
@@ -118,20 +145,83 @@ const rule: Rule = createRule({
       })
     }
 
+    // Check property values for physical values that should use logical values
+    const checkPropertyValue = (
+      keyNode: TSESTree.Identifier | TSESTree.JSXIdentifier,
+      valueNode: NonNullable<TSESTree.Property['value'] | TSESTree.JSXAttribute['value']>,
+    ) => {
+      // Skip if property name doesn't have physical values mapping
+      const propName = keyNode.name
+      if (!(propName in physicalPropertyValues)) return false
+
+      // Extract string literal value
+      const valueText = extractStringLiteralValue(valueNode)
+      if (valueText === null) {
+        // Skip if not a string literal
+        return false
+      }
+
+      // Check if value is a physical value
+      const valueMap = physicalPropertyValues[propName]
+      if (!valueMap[valueText]) return false
+
+      const logical = valueMap[valueText]
+
+      context.report({
+        node: valueNode,
+        messageId: 'physicalValue',
+        data: {
+          physical: `"${valueText}"`,
+          logical: `"${logical}"`,
+        },
+        suggest: [
+          {
+            messageId: 'replace',
+            data: {
+              physical: `"${valueText}"`,
+              logical: `"${logical}"`,
+            },
+            fix: (fixer) => {
+              if (isLiteral(valueNode)) {
+                return fixer.replaceText(valueNode, `"${logical}"`)
+              } else if (isJSXExpressionContainer(valueNode) && isLiteral(valueNode.expression)) {
+                return fixer.replaceText(valueNode.expression, `"${logical}"`)
+              }
+              return null
+            },
+          },
+        ],
+      })
+
+      return true
+    }
+
     return {
       JSXAttribute(node: TSESTree.JSXAttribute) {
         if (!isJSXIdentifier(node.name)) return
         if (!isCachedPandaProp(node)) return
 
+        // Check property name
         sendReport(node.name)
+
+        // Check property value if needed
+        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
 
+        // Check property name
         sendReport(node.key)
+
+        // Check property value if needed
+        if (node.value) {
+          checkPropertyValue(node.key, node.value)
+        }
       },
     }
   },

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

plugin/tests/no-physical-proeprties.test.ts

@@ -26,6 +26,42 @@ import { Circle } from './panda/jsx';
 
 function App(){
   return <Circle _hover={{  borderBlockEnd: 'solid 1px' }} />;
+}`,
+  },
+
+  // textAlign with non-physical values - regular object literal
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+const styles = css({ textAlign: 'start' })`,
+  },
+
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+function App(){
+  return <div className={css({ textAlign: 'end' })} />;
+}`,
+  },
+
+  // textAlign with non-physical values - JSX expression container
+  {
+    code: javascript`
+import { Box } from './panda/jsx';
+
+function App(){
+  return <Box textAlign={"start"} />;
+}`,
+  },
+
+  {
+    code: javascript`
+import { Box } from './panda/jsx';
+
+function App(){
+  return <Box textAlign={"end"} />;
 }`,
   },
 ]
@@ -53,6 +89,42 @@ import { Circle } from './panda/jsx';
 
 function App(){
   return <Circle _hover={{  borderBottom: 'solid 1px' }} />;
+}`,
+  },
+
+  // textAlign with physical values - regular object literal
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+const styles = css({ textAlign: 'left' })`,
+  },
+
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+function App(){
+  return <div className={css({ textAlign: 'right' })} />;
+}`,
+  },
+
+  // textAlign with physical values - JSX expression container
+  {
+    code: javascript`
+import { Box } from './panda/jsx';
+
+function App(){
+  return <Box textAlign={"left"} />;
+}`,
+  },
+
+  {
+    code: javascript`
+import { Box } from './panda/jsx';
+
+function App(){
+  return <Box textAlign={"right"} />;
 }`,
   },
 ]