diff --git a/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js b/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js index 79bf99294..958a3190f 100644 --- a/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js +++ b/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js @@ -488,7 +488,7 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { import stylex from 'stylex'; const styles = stylex.create({ main: { - margin: '10em 1em', + margin: '10em 1em 5em 2em', }, }); `, @@ -498,15 +498,15 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { main: { marginTop: '10em', marginInlineEnd: '1em', - marginBottom: '10em', - marginInlineStart: '1em', + marginBottom: '5em', + marginInlineStart: '2em', }, }); `, errors: [ { message: - 'Property shorthands using multiple values like "margin: 10em 1em" are not supported in StyleX. Separate into individual properties.', + 'Property shorthands using multiple values like "margin: 10em 1em 5em 2em" are not supported in StyleX. Separate into individual properties.', }, ], }, @@ -520,16 +520,14 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { }); `, output: ` - import stylex from 'stylex'; - const styles = stylex.create({ - main: { - marginTop: '10em', - marginRight: '1em', - marginBottom: '10em', - marginLeft: '1em', - }, - }); - `, + import stylex from 'stylex'; + const styles = stylex.create({ + main: { + marginBlock: '10em', + marginInline: '1em', + }, + }); + `, errors: [ { message: @@ -668,16 +666,14 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { }); `, output: ` - import stylex from 'stylex'; - const styles = stylex.create({ - main: { - paddingTop: '10em', - paddingRight: '1em', - paddingBottom: '10em', - paddingLeft: '1em', - }, - }); - `, + import stylex from 'stylex'; + const styles = stylex.create({ + main: { + paddingBlock: '10em', + paddingInline: '1em', + }, + }); + `, errors: [ { message: diff --git a/packages/eslint-plugin/src/stylex-valid-shorthands.js b/packages/eslint-plugin/src/stylex-valid-shorthands.js index 74dce4caa..8943b782e 100644 --- a/packages/eslint-plugin/src/stylex-valid-shorthands.js +++ b/packages/eslint-plugin/src/stylex-valid-shorthands.js @@ -207,6 +207,13 @@ const shorthandAliases = { const [top, right = top, bottom = top, left = right] = splitValues; + if (splitValues.length === 2) { + return [ + ['marginBlock', top], + ['marginInline', right], + ]; + } + return preferInline ? [ ['marginTop', top], @@ -234,6 +241,13 @@ const shorthandAliases = { const [top, right = top, bottom = top, left = right] = splitDirectionalShorthands(rawValue, allowImportant); + if (splitValues.length === 2) { + return [ + ['paddingBlock', top], + ['paddingInline', right], + ]; + } + return preferInline ? [ ['paddingTop', top],