Skip to content

Commit

Permalink
fix: add inline processing for borderWidth, borderRadius, borderColor…
Browse files Browse the repository at this point in the history 
…, borderStyle to valid-shorthands (#817)
  • Loading branch information
@mellyeliu
mellyeliu authored Dec 20, 2024
1 parent db00997 commit 7f545cf
Show file tree
Hide file tree
Showing 2 changed files with 196 additions and 13 deletions.
165 changes: 156 additions & 9 deletions packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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:
Expand All @@ -327,6 +382,7 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
},
],
},

{
code: `
import stylex from 'stylex';
Expand Down Expand Up @@ -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';
Expand Down
44 changes: 40 additions & 4 deletions packages/eslint-plugin/src/utils/splitShorthands.js
View file
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 Down Expand Up @@ -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);
Expand All @@ -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);
});
Expand Down

0 comments on commit 7f545cf

Please sign in to comment.