From 94db6decc1965d58c049c4b741e3b436d0600d77 Mon Sep 17 00:00:00 2001
From: Melissa Liu <mellyeliu@meta.com>
Date: Tue, 17 Dec 2024 01:32:41 -0800
Subject: [PATCH] fix valid-shorthands null object error from null
 css-shorthand-expand return

---
 .../__tests__/stylex-valid-shorthands-test.js    | 16 ++++++++++++++++
 .../eslint-plugin/src/utils/splitShorthands.js   |  5 +++++
 2 files changed, 21 insertions(+)

diff --git a/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js b/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js
index 1dc439a9..198904a7 100644
--- 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
index bbcf5c19..e00807d0 100644
--- 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 (