From 7f545cfa80301f69899ebc2513a5ce29f9951a3f Mon Sep 17 00:00:00 2001 From: melissa Date: Fri, 20 Dec 2024 10:47:00 -0800 Subject: [PATCH] fix: add inline processing for borderWidth, borderRadius, borderColor, borderStyle to valid-shorthands (#817) --- .../__tests__/stylex-valid-shorthands-test.js | 165 +++++++++++++++++- .../src/utils/splitShorthands.js | 44 ++++- 2 files changed, 196 insertions(+), 13 deletions(-) diff --git a/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js b/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js index 198904a7..5e228d7f 100644 --- 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'; @@ -303,15 +358,15 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { }, { code: ` - import stylex from 'stylex'; - const styles = stylex.create({ - main: { - borderWidth: 'calc(100% - 20px) calc(90% - 20px)', - borderColor: 'var(--test-color, #ccc) linear-gradient(to right, #ff7e5f, #feb47b)', - background: 'no-repeat center/cover, linear-gradient(to right, #ff7e5f, #feb47b)' - }, - }) - `, + import stylex from 'stylex'; + const styles = stylex.create({ + main: { + borderWidth: 'calc(100% - 20px) calc(90% - 20px)', + borderColor: 'var(--test-color, #ccc) linear-gradient(to right, #ff7e5f, #feb47b)', + background: 'no-repeat center/cover, linear-gradient(to right, #ff7e5f, #feb47b)' + }, + }) + `, errors: [ { message: @@ -327,6 +382,7 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { }, ], }, + { code: ` import stylex from 'stylex'; @@ -714,6 +770,97 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { }, ], }, + { + code: ` + import stylex from 'stylex'; + const styles = stylex.create({ + main: { + borderWidth: '4px 5px 6px 7px', + borderStyle: 'solid dashed dotted double', + borderColor: 'var(--fds-gray-10) var(--fds-gray-20) var(--fds-gray-30) var(--fds-gray-40)', + }, + }) + `, + errors: [ + { + message: + 'Property shorthands using multiple values like "borderWidth: 4px 5px 6px 7px" are not supported in StyleX. Separate into individual properties.', + }, + { + message: + 'Property shorthands using multiple values like "borderStyle: solid dashed dotted double" are not supported in StyleX. Separate into individual properties.', + }, + { + message: + 'Property shorthands using multiple values like "borderColor: var(--fds-gray-10) var(--fds-gray-20) var(--fds-gray-30) var(--fds-gray-40)" are not supported in StyleX. Separate into individual properties.', + }, + ], + output: ` + import stylex from 'stylex'; + const styles = stylex.create({ + main: { + borderTopWidth: '4px', + borderRightWidth: '5px', + borderBottomWidth: '6px', + borderLeftWidth: '7px', + borderTopStyle: 'solid', + borderRightStyle: 'dashed', + borderBottomStyle: 'dotted', + borderLeftStyle: 'double', + borderTopColor: 'var(--fds-gray-10)', + borderRightColor: 'var(--fds-gray-20)', + borderBottomColor: 'var(--fds-gray-30)', + borderLeftColor: 'var(--fds-gray-40)', + }, + }) + `, + }, + { + options: [{ preferInline: true }], + code: ` + import stylex from 'stylex'; + const styles = stylex.create({ + main: { + borderWidth: '4px 5px 6px 7px', + borderStyle: 'solid dashed dotted double', + borderColor: 'var(--fds-gray-10) var(--fds-gray-20) var(--fds-gray-30) var(--fds-gray-40)', + }, + }) + `, + errors: [ + { + message: + 'Property shorthands using multiple values like "borderWidth: 4px 5px 6px 7px" are not supported in StyleX. Separate into individual properties.', + }, + { + message: + 'Property shorthands using multiple values like "borderStyle: solid dashed dotted double" are not supported in StyleX. Separate into individual properties.', + }, + { + message: + 'Property shorthands using multiple values like "borderColor: var(--fds-gray-10) var(--fds-gray-20) var(--fds-gray-30) var(--fds-gray-40)" are not supported in StyleX. Separate into individual properties.', + }, + ], + output: ` + import stylex from 'stylex'; + const styles = stylex.create({ + main: { + borderTopWidth: '4px', + borderInlineEndWidth: '5px', + borderBottomWidth: '6px', + borderInlineStartWidth: '7px', + borderTopStyle: 'solid', + borderInlineEndStyle: 'dashed', + borderBottomStyle: 'dotted', + borderInlineStartStyle: 'double', + borderTopColor: 'var(--fds-gray-10)', + borderInlineEndColor: 'var(--fds-gray-20)', + borderBottomColor: 'var(--fds-gray-30)', + borderInlineStartColor: 'var(--fds-gray-40)', + }, + }) + `, + }, { code: ` import stylex from 'stylex'; diff --git a/packages/eslint-plugin/src/utils/splitShorthands.js b/packages/eslint-plugin/src/utils/splitShorthands.js index e00807d0..eedd6bf5 100644 --- a/packages/eslint-plugin/src/utils/splitShorthands.js +++ b/packages/eslint-plugin/src/utils/splitShorthands.js @@ -29,6 +29,7 @@ export const createSpecificTransformer = ( rawValue.toString(), allowImportant, typeof rawValue === 'number', + _preferInline, ); }; }; @@ -165,6 +166,7 @@ export function splitSpecificShorthands( value: string, allowImportant: boolean = false, isNumber: boolean = false, + _preferInline: boolean = false, ): $ReadOnlyArray<$ReadOnly<[string, number | string]>> { const { strippedValue, canFix, isInvalidShorthand } = processWhitespacesinFunctions(value); @@ -189,13 +191,47 @@ export function splitSpecificShorthands( return [[toCamelCase(property), isNumber ? Number(value) : value]]; } - const longformStyle: { - [key: string]: number | string, - } = {}; + const directionMap = { + left: 'inline-start', + right: 'inline-end', + }; + + // List directional properties for later inline transform if needed + const directionalProperties = [ + 'border-width', + 'border-color', + '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 = + 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(key)] = allowImportant + longformStyle[toCamelCase(newKey)] = allowImportant ? correctedVal : stripImportant(correctedVal); });