feat: add autofix to inline properties in valid-styles rule

facebook · Dec 10, 2024 · 5a3842d · 5a3842d
1 parent 92f98e7
commit 5a3842d
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 1 deletion.
diff --git a/packages/eslint-plugin/__tests__/stylex-valid-styles-test.js b/packages/eslint-plugin/__tests__/stylex-valid-styles-test.js
@@ -583,6 +583,72 @@ eslintTester.run('stylex-valid-styles', rule.default, {
         },
       ],
     },
+    {
+      code: `
+        import stylex from 'stylex';
+        const styles = stylex.create({
+          invalidStyle: {
+            marginStart: '10px',
+            marginEnd: '5px',
+            marginHorizontal: '15px',
+            marginVertical: '15px',
+            paddingStart: '10px',
+            paddingEnd: '5px',
+            paddingHorizontal: '5px',
+            paddingVertical: '15px',
+          },
+        });
+      `,
+      errors: [
+        {
+          message:
+            'The key "marginStart" is not allowed by stylex. Use "marginInlineStart" instead.',
+        },
+        {
+          message:
+            'The key "marginEnd" is not allowed by stylex. Use "marginInlineEnd" instead.',
+        },
+        {
+          message:
+            'The key "marginHorizontal" is not allowed by stylex. Use "marginInline" instead.',
+        },
+        {
+          message:
+            'The key "marginVertical" is not allowed by stylex. Use "marginBlock" instead.',
+        },
+        {
+          message:
+            'The key "paddingStart" is not allowed by stylex. Use "paddingInlineStart" instead.',
+        },
+        {
+          message:
+            'The key "paddingEnd" is not allowed by stylex. Use "paddingInlineEnd" instead.',
+        },
+        {
+          message:
+            'The key "paddingHorizontal" is not allowed by stylex. Use "paddingInline" instead.',
+        },
+        {
+          message:
+            'The key "paddingVertical" is not allowed by stylex. Use "paddingBlock" instead.',
+        },
+      ],
+      output: `
+        import stylex from 'stylex';
+        const styles = stylex.create({
+          invalidStyle: {
+            marginInlineStart: '10px',
+            marginInlineEnd: '5px',
+            marginInline: '15px',
+            marginBlock: '15px',
+            paddingInlineStart: '10px',
+            paddingInlineEnd: '5px',
+            paddingInline: '5px',
+            paddingBlock: '15px',
+          },
+        });
+      `,
+    },
     {
       code: "import stylex from 'stylex'; stylex.create({default: {textAlign: 'lfet'}});",
       errors: [

diff --git a/packages/eslint-plugin/src/stylex-valid-styles.js b/packages/eslint-plugin/src/stylex-valid-styles.js
@@ -1595,6 +1595,17 @@ const SupportedVendorSpecificCSSProperties = {
   ),
 };
 
+const validStyleMapping: $ReadOnly<{ [key: string]: ?string }> = {
+  marginStart: 'marginInlineStart',
+  marginEnd: 'marginInlineEnd',
+  marginHorizontal: 'marginInline',
+  marginVertical: 'marginBlock',
+  paddingStart: 'paddingInlineStart',
+  paddingEnd: 'paddingInlineEnd',
+  paddingHorizontal: 'paddingInline',
+  paddingVertical: 'paddingBlock',
+};
+
 const SVGProperties = {
   colorInterpolation: makeUnionRule('auto', 'sRGB', 'linearRGB'),
   // colorRendering: color,
@@ -2292,6 +2303,7 @@ const stylexValidStyles = {
   meta: {
     type: 'problem',
     hasSuggestions: true,
+    fixable: 'code',
     docs: {
       descriptions: 'Enforce that you create valid stylex styles',
       category: 'Possible Errors',
@@ -2635,10 +2647,41 @@ const stylexValidStyles = {
             const distance = getDistance(key, cssProp, 2);
             return distance <= 2;
           });
+
+          const replacementKey =
+            style.key.type === 'Identifier' && validStyleMapping[style.key.name]
+              ? validStyleMapping[style.key.name]
+              : style.key.type === 'Literal' &&
+                  typeof style.key.value === 'string' &&
+                  validStyleMapping[style.key.value]
+                ? validStyleMapping[style.key.value]
+                : null;
+
+          let originalKey = '';
+
+          if (style.key.type === 'Identifier') {
+            originalKey = style.key.name;
+          } else if (
+            style.key.type === 'Literal' &&
+            typeof style.key.value === 'string'
+          ) {
+            originalKey = style.key.value;
+          }
+          // add autofix here
           return context.report({
             node: style.key,
             loc: style.key.loc,
-            message: 'This is not a key that is allowed by stylex',
+            message:
+              replacementKey &&
+              (style.key.type === 'Identifier' || style.key.type === 'Literal')
+                ? `The key "${originalKey}" is not allowed by stylex. Use "${replacementKey}" instead.`
+                : 'This is not a key that is allowed by stylex',
+            fix: (fixer) => {
+              if (replacementKey) {
+                return fixer.replaceText(style.key, replacementKey);
+              }
+              return null;
+            },
             suggest:
               closestKey != null
                 ? [