add border radius processing

facebook · Dec 20, 2024 · a129687 · a129687
1 parent adaffa4
commit a129687
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 8 deletions.
diff --git a/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js b/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js
@@ -187,6 +187,61 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
         },
       ],
     },
+    {
+      options: [{ preferInline: true }],
+      code: `
+        import stylex from 'stylex';
+        const styles = stylex.create({
+          main: {
+            borderRadius: '10px 15px 20px 25px',
+          },
+        });
+      `,
+      output: `
+        import stylex from 'stylex';
+        const styles = stylex.create({
+          main: {
+            borderStartStartRadius: '10px',
+            borderStartEndRadius: '15px',
+            borderEndEndRadius: '20px',
+            borderEndStartRadius: '25px',
+          },
+        });
+      `,
+      errors: [
+        {
+          message:
+            'Property shorthands using multiple values like "borderRadius: 10px 15px 20px 25px" are not supported in StyleX. Separate into individual properties.',
+        },
+      ],
+    },
+    {
+      code: `
+        import stylex from 'stylex';
+        const styles = stylex.create({
+          main: {
+            borderRadius: '10px 15px 20px 25px',
+          },
+        });
+      `,
+      output: `
+        import stylex from 'stylex';
+        const styles = stylex.create({
+          main: {
+            borderTopLeftRadius: '10px',
+            borderTopRightRadius: '15px',
+            borderBottomRightRadius: '20px',
+            borderBottomLeftRadius: '25px',
+          },
+        });
+      `,
+      errors: [
+        {
+          message:
+            'Property shorthands using multiple values like "borderRadius: 10px 15px 20px 25px" are not supported in StyleX. Separate into individual properties.',
+        },
+      ],
+    },
     {
       code: `
         import stylex from 'stylex';

diff --git a/packages/eslint-plugin/src/utils/splitShorthands.js b/packages/eslint-plugin/src/utils/splitShorthands.js
@@ -203,18 +203,32 @@ export function splitSpecificShorthands(
     'border-style',
   ];
 
+  const borderRadiusMap: { [string]: string } = {
+    'border-top-left-radius': 'borderStartStartRadius',
+    'border-top-right-radius': 'borderStartEndRadius',
+    'border-bottom-left-radius': 'borderEndStartRadius',
+    'border-bottom-right-radius': 'borderEndEndRadius',
+  };
+
   const longformStyle: { [key: string]: number | string } = {};
 
   Object.entries(longform).forEach(([key, val]) => {
     const newKey =
-      directionalProperties.includes(property) &&
-      _preferInline &&
-      /-(left|right)/.test(key)
-        ? key.replace(
-            /-(left|right)/,
-            (_, direction) => `-${directionMap[direction]}`,
-          )
-        : key;
+      property === 'border-radius' && _preferInline
+        ? borderRadiusMap[key] || null
+        : directionalProperties.includes(property) &&
+            _preferInline &&
+            /-(left|right)/.test(key)
+          ? key.replace(
+              /-(left|right)/,
+              (_, direction) => `-${directionMap[direction]}`,
+            )
+          : key;
+
+    if (!newKey) {
+      // If css shorthand expand fails, we won't auto-fix
+      return [[toCamelCase(property), CANNOT_FIX]];
+    }
 
     const correctedVal = addSpacesAfterCommasInParentheses(val);
     longformStyle[toCamelCase(newKey)] = allowImportant