diff --git a/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js b/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js index 51ec0403..2e462a56 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.', }, ], }, @@ -523,10 +523,8 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { import stylex from 'stylex'; const styles = stylex.create({ main: { - marginTop: '10em', - marginRight: '1em', - marginBottom: '10em', - marginLeft: '1em', + marginBlock: '10em', + marginInline: '1em', }, }); `, @@ -671,10 +669,8 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { import stylex from 'stylex'; const styles = stylex.create({ main: { - paddingTop: '10em', - paddingRight: '1em', - paddingBottom: '10em', - paddingLeft: '1em', + paddingBlock: '10em', + paddingInline: '1em', }, }); `, diff --git a/packages/eslint-plugin/src/stylex-valid-shorthands.js b/packages/eslint-plugin/src/stylex-valid-shorthands.js index 74dce4ca..8943b782 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],