feat: autofix for horizontal/vertical padding/margins (#690)

facebook · Sep 21, 2024 · deaa7ce · deaa7ce
1 parent 53829eb
commit deaa7ce
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js b/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js
@@ -171,6 +171,48 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
         },
       ],
     },
+    {
+      code: `
+        import stylex from 'stylex';
+        const styles = stylex.create({
+          main: {
+            marginHorizontal: '10px',
+            marginVertical: '5px',
+            paddingHorizontal: '10px',
+            paddingVertical: '5px',
+          },
+        });
+      `,
+      output: `
+        import stylex from 'stylex';
+        const styles = stylex.create({
+          main: {
+            marginInline: '10px',
+            marginBlock: '5px',
+            paddingInline: '10px',
+            paddingBlock: '5px',
+          },
+        });
+      `,
+      errors: [
+        {
+          message:
+            'Use "marginInline" instead of legacy formats like "marginHorizontal" to adhere to logical property naming.',
+        },
+        {
+          message:
+            'Use "marginBlock" instead of legacy formats like "marginVertical" to adhere to logical property naming.',
+        },
+        {
+          message:
+            'Use "paddingInline" instead of legacy formats like "paddingHorizontal" to adhere to logical property naming.',
+        },
+        {
+          message:
+            'Use "paddingBlock" instead of legacy formats like "paddingVertical" to adhere to logical property naming.',
+        },
+      ],
+    },
     {
       code: `
         import stylex from 'stylex';

diff --git a/packages/eslint-plugin/src/stylex-valid-shorthands.js b/packages/eslint-plugin/src/stylex-valid-shorthands.js
@@ -33,8 +33,12 @@ import { CANNOT_FIX } from './utils/splitShorthands.js';
 const legacyNameMapping: $ReadOnly<{ [key: string]: ?string }> = {
   marginStart: 'marginInlineStart',
   marginEnd: 'marginInlineEnd',
+  marginHorizontal: 'marginInline',
+  marginVertical: 'marginBlock',
   paddingStart: 'paddingInlineStart',
   paddingEnd: 'paddingInlineEnd',
+  paddingHorizontal: 'paddingInline',
+  paddingVertical: 'paddingBlock',
 };
 
 const shorthandAliases: $ReadOnly<{