Add noPhysicalCssProperties eslint rule

Author: alexcarpenter

eslint.config.mjs

@@ -171,6 +171,83 @@ const noUnstableMethods = {
   },
 };
 
+const noPhysicalCssProperties = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Enforce use of CSS logical properties instead of physical properties for RTL support',
+      recommended: false,
+    },
+    messages: {
+      useLogicalProperty:
+        'Use logical CSS property "{{logical}}" instead of physical property "{{physical}}" for RTL support.',
+      useLogicalTextAlign:
+        'Use logical textAlign value "{{logical}}" instead of physical value "{{physical}}" for RTL support.',
+    },
+    schema: [],
+  },
+  create(context) {
+    // Mapping of physical properties to logical equivalents
+    const propertyMap = {
+      left: 'insetInlineStart',
+      right: 'insetInlineEnd',
+      marginLeft: 'marginInlineStart',
+      marginRight: 'marginInlineEnd',
+      paddingLeft: 'paddingInlineStart',
+      paddingRight: 'paddingInlineEnd',
+      borderLeft: 'borderInlineStart',
+      borderRight: 'borderInlineEnd',
+      borderLeftWidth: 'borderInlineStartWidth',
+      borderRightWidth: 'borderInlineEndWidth',
+      borderLeftStyle: 'borderInlineStartStyle',
+      borderRightStyle: 'borderInlineEndStyle',
+      borderLeftColor: 'borderInlineStartColor',
+      borderRightColor: 'borderInlineEndColor',
+      borderTopLeftRadius: 'borderStartStartRadius',
+      borderTopRightRadius: 'borderStartEndRadius',
+      borderBottomLeftRadius: 'borderEndStartRadius',
+      borderBottomRightRadius: 'borderEndEndRadius',
+    };
+
+    const checkProperty = (key, value) => {
+      const keyName = key.type === 'Identifier' ? key.name : key.value;
+
+      // Check for physical property names
+      if (propertyMap[keyName]) {
+        context.report({
+          node: key,
+          messageId: 'useLogicalProperty',
+          data: {
+            physical: keyName,
+            logical: propertyMap[keyName],
+          },
+        });
+      }
+
+      // Check for textAlign with physical values
+      if (keyName === 'textAlign' && value) {
+        if (value.type === 'Literal' && (value.value === 'left' || value.value === 'right')) {
+          const logicalValue = value.value === 'left' ? 'start' : 'end';
+          context.report({
+            node: value,
+            messageId: 'useLogicalTextAlign',
+            data: {
+              physical: value.value,
+              logical: logicalValue,
+            },
+          });
+        }
+      }
+    };
+
+    return {
+      Property(node) {
+        checkProperty(node.key, node.value);
+      },
+    };
+  },
+};
+
 export default tseslint.config([
   {
     name: 'repo/ignores',
@@ -248,6 +325,7 @@ export default tseslint.config([
         rules: {
           'no-global-object': noGlobalObject,
           'no-unstable-methods': noUnstableMethods,
+          'no-physical-css-properties': noPhysicalCssProperties,
         },
       },
       'simple-import-sort': pluginSimpleImportSort,
@@ -458,6 +536,13 @@ export default tseslint.config([
       'custom-rules/no-unstable-methods': 'error',
     },
   },
+  {
+    name: 'packages/ui',
+    files: ['packages/ui/src/**/*'],
+    rules: {
+      'custom-rules/no-physical-css-properties': 'error',
+    },
+  },
   {
     name: 'packages - vitest',
     files: ['packages/*/src/**/*.test.{ts,tsx}'],

packages/ui/src/common/InfiniteListSpinner.tsx

@@ -16,6 +16,7 @@ export const InfiniteListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
         sx={{
           margin: 'auto',
           position: 'absolute',
+          // eslint-disable-next-line custom-rules/no-physical-css-properties -- Centering with transform: translateX(-50%)
           left: '50%',
           top: '50%',
           transform: 'translateY(-50%) translateX(-50%)',

packages/ui/src/common/PrintableComponent.tsx

@@ -24,6 +24,7 @@ export const PrintableComponent = (props: UsePrintableReturn['printableProps'] &
   return (
     <div
       ref={ref}
+      // eslint-disable-next-line custom-rules/no-physical-css-properties -- Off-screen hide for print functionality
       style={{ position: 'fixed', left: '-9999px', top: 0, display: 'none' }}
     >
       {children}

packages/ui/src/common/organizations/OrganizationPreview.tsx

@@ -96,6 +96,7 @@ export const OrganizationPreviewSpinner = forwardRef<HTMLDivElement>((_, ref) =>
         sx={{
           margin: 'auto',
           position: 'absolute',
+          // eslint-disable-next-line custom-rules/no-physical-css-properties -- Centering with transform: translateX(-50%)
           left: '50%',
           top: '50%',
           transform: 'translateY(-50%) translateX(-50%)',

packages/ui/src/components/ImpersonationFab/index.tsx

@@ -199,6 +199,7 @@ const ImpersonationFabInternal = () => {
           position: 'fixed',
           overflow: 'hidden',
           top: `var(${topProperty}, ${defaultTop}px)`,
+          // eslint-disable-next-line custom-rules/no-physical-css-properties -- Complex JS-based positioning via CSS custom properties
           right: `var(${rightProperty}, ${defaultRight}px)`,
           zIndex: t.zIndices.$fab,
           boxShadow: t.shadows.$fabShadow,

packages/ui/src/components/OrganizationProfile/DomainList.tsx

@@ -168,6 +168,7 @@ export const DomainList = withProtect(
                 display: 'flex',
                 margin: 'auto',
                 position: 'absolute',
+                // eslint-disable-next-line custom-rules/no-physical-css-properties -- Centering with transform: translateX(-50%)
                 left: '50%',
                 top: '50%',
                 transform: 'translateY(-50%) translateX(-50%)',

packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx

@@ -520,6 +520,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
           href={`#${buttonIdentifier}`}
           css={css`
             position: fixed;
+            /* eslint-disable-next-line custom-rules/no-physical-css-properties -- Skip link - visually hidden pattern */
             left: -999px;
             top: 1rem;
             z-index: 999999;
@@ -531,6 +532,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
             text-decoration: underline;
 
             &:focus {
+              /* eslint-disable-next-line custom-rules/no-physical-css-properties -- Skip link - visually hidden pattern */
               left: 1rem;
               outline: 2px solid;
               outline-offset: 2px;

packages/ui/src/elements/Avatar.tsx

@@ -160,6 +160,7 @@ export const Avatar = (props: AvatarProps) => {
           background: t.colors.$colorShimmer,
           position: 'absolute',
           top: 0,
+          // eslint-disable-next-line custom-rules/no-physical-css-properties -- Shimmer effect uses translateX animation
           left: 0,
           width: '25%',
           height: '100%',
@@ -171,6 +172,7 @@ export const Avatar = (props: AvatarProps) => {
             content: "''",
             position: 'absolute',
             top: 0,
+            // eslint-disable-next-line custom-rules/no-physical-css-properties -- Shimmer effect uses translateX animation
             left: 0,
             width: '400%',
             height: '100%',

packages/ui/src/elements/Drawer.tsx

@@ -535,7 +535,9 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
               willChange: 'transform',
               position: 'absolute',
               bottom: 0,
+              // eslint-disable-next-line custom-rules/no-physical-css-properties -- Full-width overlay positioning
               left: 0,
+              // eslint-disable-next-line custom-rules/no-physical-css-properties -- Full-width overlay positioning
               right: 0,
               background: common.mergedColorsBackground(
                 colors.setAlpha(t.colors.$colorBackground, 1),

packages/ui/src/elements/Modal.tsx

@@ -81,6 +81,7 @@ export const Modal = withFloatingTree((props: ModalProps) => {
               width: '100vw',
               height: ['100vh', '-webkit-fill-available'],
               position: 'fixed',
+              // eslint-disable-next-line custom-rules/no-physical-css-properties -- Full-viewport centering (used with right: 0)
               left: 0,
               top: 0,
             }),