Merge branch 'main' into valid-shorthands-spacing

facebook · Aug 16, 2024 · 1cf81e4 · 1cf81e4
2 parents 16fea59 + 680e095
commit 1cf81e4
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 24 deletions.
diff --git a/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js b/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js
@@ -488,7 +488,7 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
           import stylex from 'stylex';
           const styles = stylex.create({
             main: {
-              margin: '10em 1em',
+              margin: '10em 1em 5em 2em',
             },
           });
         `,
@@ -498,15 +498,15 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
             main: {
               marginTop: '10em',
               marginInlineEnd: '1em',
-              marginBottom: '10em',
-              marginInlineStart: '1em',
+              marginBottom: '5em',
+              marginInlineStart: '2em',
             },
           });
         `,
       errors: [
         {
           message:
-            'Property shorthands using multiple values like "margin: 10em 1em" are not supported in StyleX. Separate into individual properties.',
+            'Property shorthands using multiple values like "margin: 10em 1em 5em 2em" are not supported in StyleX. Separate into individual properties.',
         },
       ],
     },
@@ -520,16 +520,14 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
           });
         `,
       output: `
-          import stylex from 'stylex';
-          const styles = stylex.create({
-            main: {
-              marginTop: '10em',
-              marginRight: '1em',
-              marginBottom: '10em',
-              marginLeft: '1em',
-            },
-          });
-        `,
+        import stylex from 'stylex';
+        const styles = stylex.create({
+          main: {
+            marginBlock: '10em',
+            marginInline: '1em',
+          },
+        });
+      `,
       errors: [
         {
           message:
@@ -668,16 +666,14 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
           });
         `,
       output: `
-          import stylex from 'stylex';
-          const styles = stylex.create({
-            main: {
-              paddingTop: '10em',
-              paddingRight: '1em',
-              paddingBottom: '10em',
-              paddingLeft: '1em',
-            },
-          });
-        `,
+        import stylex from 'stylex';
+        const styles = stylex.create({
+          main: {
+            paddingBlock: '10em',
+            paddingInline: '1em',
+          },
+        });
+      `,
       errors: [
         {
           message:

diff --git a/packages/eslint-plugin/src/stylex-valid-shorthands.js b/packages/eslint-plugin/src/stylex-valid-shorthands.js
@@ -207,6 +207,13 @@ const shorthandAliases = {
 
     const [top, right = top, bottom = top, left = right] = splitValues;
 
+    if (splitValues.length === 2) {
+      return [
+        ['marginBlock', top],
+        ['marginInline', right],
+      ];
+    }
+
     return preferInline
       ? [
           ['marginTop', top],
@@ -234,6 +241,13 @@ const shorthandAliases = {
     const [top, right = top, bottom = top, left = right] =
       splitDirectionalShorthands(rawValue, allowImportant);
 
+    if (splitValues.length === 2) {
+      return [
+        ['paddingBlock', top],
+        ['paddingInline', right],
+      ];
+    }
+
     return preferInline
       ? [
           ['paddingTop', top],