Skip to content

Commit

Permalink
chore: dynamically generate shorthands property handlers (#670)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mellyeliu
mellyeliu authored Aug 21, 2024
1 parent 2de3db8 commit 7c1e5c9
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 259 deletions.
278 changes: 21 additions & 257 deletions packages/eslint-plugin/src/stylex-valid-shorthands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,9 @@ import type { SourceCode } from 'eslint/eslint-rule';
import type { Token } from 'eslint/eslint-ast';

import {
splitSpecificShorthands,
splitDirectionalShorthands,
createBlockInlineTransformer,
createSpecificTransformer,
createDirectionalTransformer,
} from './utils/splitShorthands.js';

import { CANNOT_FIX } from './utils/splitShorthands.js';
Expand All @@ -37,261 +38,24 @@ const legacyNameMapping = {
};

const shorthandAliases = {
background: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
return splitSpecificShorthands(
'background',
rawValue.toString(),
allowImportant,
);
},
font: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
return splitSpecificShorthands('font', rawValue.toString(), allowImportant);
},
border: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
return splitSpecificShorthands(
'border',
rawValue.toString(),
allowImportant,
);
},
borderColor: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
return splitSpecificShorthands(
'border-color',
rawValue.toString(),
allowImportant,
);
},
borderWidth: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
return splitSpecificShorthands(
'border-width',
rawValue.toString(),
allowImportant,
);
},
borderStyle: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
return splitSpecificShorthands(
'border-style',
rawValue.toString(),
allowImportant,
);
},
borderTop: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
return splitSpecificShorthands(
'border-top',
rawValue.toString(),
allowImportant,
);
},
borderRight: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
return splitSpecificShorthands(
'border-right',
rawValue.toString(),
allowImportant,
);
},
borderBottom: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
return splitSpecificShorthands(
'border-bottom',
rawValue.toString(),
allowImportant,
);
},
borderLeft: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
return splitSpecificShorthands(
'border-left',
rawValue.toString(),
allowImportant,
);
},
borderRadius: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
return splitSpecificShorthands(
'border-radius',
rawValue.toString(),
allowImportant,
);
},
outline: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
return splitSpecificShorthands(
'outline',
rawValue.toString(),
allowImportant,
);
},
marginInline: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
const splitValues = splitDirectionalShorthands(rawValue, allowImportant);
if (splitValues.length === 1) {
return [['marginInline', rawValue]];
}
const [top, right = top, _ = top, __ = right] = splitValues;
return [
['marginInlineStart', top],
['marginInlineEnd', right],
];
},
marginBlock: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
const splitValues = splitDirectionalShorthands(rawValue, allowImportant);
if (splitValues.length === 1) {
return [['marginBlock', rawValue]];
}
const [top, right = top, _ = top, __ = right] = splitValues;
return [
['marginBlockStart', top],
['marginBlockEnd', right],
];
},
margin: (
rawValue: number | string,
allowImportant: boolean = false,
preferInline: boolean = false,
) => {
const splitValues = splitDirectionalShorthands(rawValue, allowImportant);
if (splitValues.length === 1) {
return [['margin', rawValue]];
}

const [top, right = top, bottom = top, left = right] = splitValues;

if (splitValues.length === 2) {
return [
['marginBlock', top],
['marginInline', right],
];
}

return preferInline
? [
['marginTop', top],
['marginInlineEnd', right],
['marginBottom', bottom],
['marginInlineStart', left],
]
: [
['marginTop', top],
['marginRight', right],
['marginBottom', bottom],
['marginLeft', left],
];
},
padding: (
rawValue: number | string,
allowImportant: boolean = false,
preferInline: boolean = false,
) => {
const splitValues = splitDirectionalShorthands(rawValue, allowImportant);
if (splitValues.length === 1) {
return [['padding', rawValue]];
}

const [top, right = top, bottom = top, left = right] =
splitDirectionalShorthands(rawValue, allowImportant);

if (splitValues.length === 2) {
return [
['paddingBlock', top],
['paddingInline', right],
];
}

return preferInline
? [
['paddingTop', top],
['paddingInlineEnd', right],
['paddingBottom', bottom],
['paddingInlineStart', left],
]
: [
['paddingTop', top],
['paddingRight', right],
['paddingBottom', bottom],
['paddingLeft', left],
];
},
paddingInline: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
const splitValues = splitDirectionalShorthands(rawValue, allowImportant);
if (splitValues.length === 1) {
return [['paddingInline', rawValue]];
}
const [top, right = top, _ = top, __ = right] = splitValues;
return [
['paddingInlineStart', top],
['paddingInlineEnd', right],
];
},
paddingBlock: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
const splitValues = splitDirectionalShorthands(rawValue, allowImportant);
if (splitValues.length === 1) {
return [['paddingBlock', rawValue]];
}
const [top, right = top, _ = top, __ = right] = splitValues;
return [
['paddingBlockStart', top],
['paddingBlockEnd', right],
];
},
background: createSpecificTransformer('background'),
font: createSpecificTransformer('font'),
border: createSpecificTransformer('border'),
borderColor: createSpecificTransformer('border-color'),
borderWidth: createSpecificTransformer('border-width'),
borderStyle: createSpecificTransformer('border-style'),
borderTop: createSpecificTransformer('border-top'),
borderRight: createSpecificTransformer('border-right'),
borderBottom: createSpecificTransformer('border-bottom'),
borderLeft: createSpecificTransformer('border-left'),
borderRadius: createSpecificTransformer('border-radius'),
outline: createSpecificTransformer('outline'),
margin: createDirectionalTransformer('margin', 'Block', 'Inline'),
padding: createDirectionalTransformer('padding', 'Block', 'Inline'),
marginBlock: createBlockInlineTransformer('margin', 'Block'),
marginInline: createBlockInlineTransformer('margin', 'Inline'),
paddingBlock: createBlockInlineTransformer('padding', 'Block'),
paddingInline: createBlockInlineTransformer('padding', 'Inline'),
};

const stylexValidShorthands = {
Expand Down
Loading

0 comments on commit 7c1e5c9

Please sign in to comment.