From b169237f01b5574613aa0120a85331f5477191ac Mon Sep 17 00:00:00 2001 From: Melissa Liu Date: Fri, 20 Dec 2024 08:18:27 -0800 Subject: [PATCH] add inline processing for borderWidth, borderColor, borderStyle --- .../__tests__/stylex-valid-shorthands-test.js | 109 +++++++++++++++--- .../src/stylex-valid-shorthands.js | 21 +--- .../src/utils/splitShorthands.js | 46 +++++--- 3 files changed, 126 insertions(+), 50 deletions(-) diff --git a/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js b/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js index 2efc8c4f..55fd1f1e 100644 --- a/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js +++ b/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js @@ -326,24 +326,6 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { 'Property shorthands using multiple values like "background: no-repeat center/cover, linear-gradient(to right, #ff7e5f, #feb47b)" are not supported in StyleX. Separate into individual properties.', }, ], - output: ` - import stylex from 'stylex'; - const styles = stylex.create({ - main: { - borderTopWidth: 'calc(100% - 20px)', - borderRightWidth: 'calc(90% - 20px)', - borderBottomWidth: 'calc(100% - 20px)', - borderLeftWidth: 'calc(90% - 20px)', - borderTopColor: 'var(--test-color, #ccc)', - borderRightColor: 'linear-gradient(to right, #ff7e5f, #feb47b)', - borderBottomColor: 'var(--test-color, #ccc)', - borderLeftColor: 'linear-gradient(to right, #ff7e5f, #feb47b)', - backgroundImage: 'no-repeat, linear-gradient(to right, #ff7e5f, #feb47b)', - backgroundPosition: 'center', - backgroundSize: 'cover', - }, - }) - `, }, { @@ -733,6 +715,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/stylex-valid-shorthands.js b/packages/eslint-plugin/src/stylex-valid-shorthands.js index 314cb4df..7d568b2c 100644 --- a/packages/eslint-plugin/src/stylex-valid-shorthands.js +++ b/packages/eslint-plugin/src/stylex-valid-shorthands.js @@ -42,24 +42,9 @@ const shorthandAliases: $ReadOnly<{ }> = { background: createSpecificTransformer('background'), font: createSpecificTransformer('font'), - borderColor: createDirectionalTransformer( - 'border', - 'Block', - 'Inline', - 'Color', - ), - borderWidth: createDirectionalTransformer( - 'border', - 'Block', - 'Inline', - 'Width', - ), - borderStyle: createDirectionalTransformer( - 'border', - 'Block', - 'Inline', - 'Style', - ), + borderColor: createSpecificTransformer('border-color'), + borderWidth: createSpecificTransformer('border-width'), + borderStyle: createSpecificTransformer('border-style'), borderTop: createSpecificTransformer('border-top'), borderRight: createSpecificTransformer('border-right'), borderBottom: createSpecificTransformer('border-bottom'), diff --git a/packages/eslint-plugin/src/utils/splitShorthands.js b/packages/eslint-plugin/src/utils/splitShorthands.js index 23bb5058..b59e1183 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, ); }; }; @@ -37,7 +38,6 @@ export const createDirectionalTransformer = ( baseProperty: string, blockSuffix: string, inlineSuffix: string, - basePropertySuffix: string = '', ): (( rawValue: number | string, allowImportant?: boolean, @@ -55,7 +55,7 @@ export const createDirectionalTransformer = ( return [[`${baseProperty}`, top]]; } - if (splitValues.length === 2 && baseProperty === "margin" || baseProperty === "padding" ) { + if (splitValues.length === 2) { return [ [`${baseProperty}${blockSuffix}`, top], [`${baseProperty}${inlineSuffix}`, right], @@ -64,16 +64,16 @@ export const createDirectionalTransformer = ( return preferInline ? [ - [`${baseProperty}Top${basePropertySuffix}`, top], - [`${baseProperty}${inlineSuffix}End${basePropertySuffix}`, right], - [`${baseProperty}Bottom${basePropertySuffix}`, bottom], - [`${baseProperty}${inlineSuffix}Start${basePropertySuffix}`, left], + [`${baseProperty}Top`, top], + [`${baseProperty}${inlineSuffix}End`, right], + [`${baseProperty}Bottom`, bottom], + [`${baseProperty}${inlineSuffix}Start`, left], ] : [ - [`${baseProperty}Top${basePropertySuffix}`, top], - [`${baseProperty}Right${basePropertySuffix}`, right], - [`${baseProperty}Bottom${basePropertySuffix}`, bottom], - [`${baseProperty}Left${basePropertySuffix}`, left], + [`${baseProperty}Top`, top], + [`${baseProperty}Right`, right], + [`${baseProperty}Bottom`, bottom], + [`${baseProperty}Left`, left], ]; }; }; @@ -166,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); @@ -190,13 +191,30 @@ export function splitSpecificShorthands( return [[toCamelCase(property), isNumber ? Number(value) : value]]; } - const longformStyle: { - [key: string]: number | string, - } = {}; + const directionMap = { + left: 'inline-start', + right: 'inline-end', + }; + + // Apply inline transformation to directional properties + const inlineProperties = ['border-width', 'border-color', 'border-style']; + + const longformStyle: { [key: string]: number | string } = {}; Object.entries(longform).forEach(([key, val]) => { + const newKey = + inlineProperties.includes(property) && + _preferInline && + /-(left|right)/.test(key) + ? key.replace( + /-(left|right)/, + (_, direction) => `-${directionMap[direction]}`, + ) + : key; + + // Apply the corrected value, adding spaces or stripping important if necessary const correctedVal = addSpacesAfterCommasInParentheses(val); - longformStyle[toCamelCase(key)] = allowImportant + longformStyle[toCamelCase(newKey)] = allowImportant ? correctedVal : stripImportant(correctedVal); });