fix valid-shorthands null object error from null css-shorthand-expand…

… return (facebook#814)
aminaopio · Dec 27, 2024 · 0dc4e82 · 0dc4e82
1 parent 3bfbbdd
commit 0dc4e82
Show file tree

Hide file tree

Showing 2 changed files with 21 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,22 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
         },
       ],
     },
+    {
+      code: `
+      import stylex from 'stylex';
+      const styles = stylex.create({
+        main: {
+          borderRight: '4px solid var(--fds-gray-10)'
+        },
+      })
+    `,
+      errors: [
+        {
+          message:
+            'Property shorthands using multiple values like "borderRight: 4px solid var(--fds-gray-10)" 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
@@ -175,6 +175,11 @@ export function splitSpecificShorthands(
 
   const longform = cssExpand(property, strippedValue);
 
+  if (!longform) {
+    // If css shorthand expand fails, we won't auto-fix
+    return [[toCamelCase(property), CANNOT_FIX]];
+  }
+
   // If the longform is empty or all values are the same, no need to expand
   // Relevant for properties like `borderColor` or `borderStyle`
   if (