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 (