Skip to content

Commit

Permalink
add inline processing for borderWidth, borderColor, borderStyle
Browse files Browse the repository at this point in the history
  • Loading branch information
mellyeliu committed Dec 20, 2024
1 parent e1cda2b commit b169237
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 50 deletions.
109 changes: 91 additions & 18 deletions packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
})
`,
},

{
Expand Down Expand Up @@ -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';
Expand Down
21 changes: 3 additions & 18 deletions packages/eslint-plugin/src/stylex-valid-shorthands.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down
46 changes: 32 additions & 14 deletions packages/eslint-plugin/src/utils/splitShorthands.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const createSpecificTransformer = (
rawValue.toString(),
allowImportant,
typeof rawValue === 'number',
_preferInline,
);
};
};
Expand All @@ -37,7 +38,6 @@ export const createDirectionalTransformer = (
baseProperty: string,
blockSuffix: string,
inlineSuffix: string,
basePropertySuffix: string = '',
): ((
rawValue: number | string,
allowImportant?: boolean,
Expand All @@ -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],
Expand All @@ -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],
];
};
};
Expand Down Expand Up @@ -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);
Expand All @@ -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);
});
Expand Down

0 comments on commit b169237

Please sign in to comment.