diff --git a/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js b/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js index 181f5955..32a1e72d 100644 --- a/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js +++ b/packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js @@ -124,20 +124,76 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { const styles = stylex.create({ main: { marginTop: '10px', - marginInlineEnd: '12px', + marginRight: '12px', marginBottom: '13px', - marginInlineStart: '14px', + marginLeft: '14px', }, }); `, errors: [ { message: - 'Property shorthands using multiple values like margin: 10px 12px 13px 14px are not supported in StyleX. Separate into individual properties.', + 'Property shorthands using multiple values like "margin: 10px 12px 13px 14px" are not supported in StyleX. Separate into individual properties.', }, ], }, { + options: [{ allowImportant: true }], + code: ` + import stylex from 'stylex'; + const styles = stylex.create({ + main: { + margin: '10px 12px 13px 14px !important', + }, + }); + `, + output: ` + import stylex from 'stylex'; + const styles = stylex.create({ + main: { + marginTop: '10px !important', + marginRight: '12px !important', + marginBottom: '13px !important', + marginLeft: '14px !important', + }, + }); + `, + errors: [ + { + message: + 'Property shorthands using multiple values like "margin: 10px 12px 13px 14px !important" are not supported in StyleX. Separate into individual properties.', + }, + ], + }, + { + code: ` + import stylex from 'stylex'; + const styles = stylex.create({ + main: { + margin: '10px 12px 13px 14px !important', + }, + }); + `, + output: ` + import stylex from 'stylex'; + const styles = stylex.create({ + main: { + marginTop: '10px', + marginRight: '12px', + marginBottom: '13px', + marginLeft: '14px', + }, + }); + `, + errors: [ + { + message: + 'Property shorthands using multiple values like "margin: 10px 12px 13px 14px !important" are not supported in StyleX. Separate into individual properties.', + }, + ], + }, + { + options: [{ preferInline: true }], code: ` import stylex from 'stylex'; const styles = stylex.create({ @@ -160,7 +216,7 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { 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" are not supported in StyleX. Separate into individual properties.', }, ], }, @@ -178,16 +234,16 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { const styles = stylex.create({ main: { marginTop: '10em', - marginInlineEnd: '1em', + marginRight: '1em', marginBottom: '10em', - marginInlineStart: '1em', + marginLeft: '1em', }, }); `, 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" are not supported in StyleX. Separate into individual properties.', }, ], }, @@ -212,7 +268,7 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { errors: [ { message: - 'Property shorthands using multiple values like marginInline: 10em 1em are not supported in StyleX. Separate into individual properties.', + 'Property shorthands using multiple values like "marginInline: 10em 1em" are not supported in StyleX. Separate into individual properties.', }, ], }, @@ -237,7 +293,7 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { errors: [ { message: - 'Property shorthands using multiple values like marginBlock: 10em 1em are not supported in StyleX. Separate into individual properties.', + 'Property shorthands using multiple values like "marginBlock: 10em 1em" are not supported in StyleX. Separate into individual properties.', }, ], }, @@ -262,7 +318,7 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { errors: [ { message: - 'Property shorthands using multiple values like paddingBlock: 10em 1em are not supported in StyleX. Separate into individual properties.', + 'Property shorthands using multiple values like "paddingBlock: 10em 1em" are not supported in StyleX. Separate into individual properties.', }, ], }, @@ -273,6 +329,8 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { main: { paddingTop: '10em', paddingBottom: '1em', + marginStart: '20em', + marginEnd: '20em', paddingStart: '10em', paddingEnd: '1em', }, @@ -284,6 +342,8 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { main: { paddingTop: '10em', paddingBottom: '1em', + marginInlineStart: '20em', + marginInlineEnd: '20em', paddingInlineStart: '10em', paddingInlineEnd: '1em', }, @@ -292,11 +352,19 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { errors: [ { message: - 'Use paddingInlineStart instead of legacy formats like paddingStart to adhere to logical property naming.', + 'Use "marginInlineStart" instead of legacy formats like "marginStart" to adhere to logical property naming.', }, { message: - 'Use paddingInlineEnd instead of legacy formats like paddingEnd to adhere to logical property naming.', + 'Use "marginInlineEnd" instead of legacy formats like "marginEnd" to adhere to logical property naming.', + }, + { + message: + 'Use "paddingInlineStart" instead of legacy formats like "paddingStart" to adhere to logical property naming.', + }, + { + message: + 'Use "paddingInlineEnd" instead of legacy formats like "paddingEnd" to adhere to logical property naming.', }, ], }, @@ -314,16 +382,16 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { const styles = stylex.create({ main: { paddingTop: '10em', - paddingInlineEnd: '1em', + paddingRight: '1em', paddingBottom: '10em', - paddingInlineStart: '1em', + paddingLeft: '1em', }, }); `, errors: [ { message: - 'Property shorthands using multiple values like padding: 10em 1em are not supported in StyleX. Separate into individual properties.', + 'Property shorthands using multiple values like "padding: 10em 1em" are not supported in StyleX. Separate into individual properties.', }, ], }, diff --git a/packages/eslint-plugin/src/stylex-valid-shorthands.js b/packages/eslint-plugin/src/stylex-valid-shorthands.js index 34885590..362a4b79 100644 --- a/packages/eslint-plugin/src/stylex-valid-shorthands.js +++ b/packages/eslint-plugin/src/stylex-valid-shorthands.js @@ -35,6 +35,7 @@ const shorthandAliases = { marginInline: ( rawValue: number | string, allowImportant: boolean = false, + _preferInline: boolean = false, ) => { const splitValues = splitValue(rawValue, allowImportant); if (splitValues.length === 1) { @@ -46,7 +47,11 @@ const shorthandAliases = { ['marginInlineEnd', right], ]; }, - marginBlock: (rawValue: number | string, allowImportant: boolean = false) => { + marginBlock: ( + rawValue: number | string, + allowImportant: boolean = false, + _preferInline: boolean = false, + ) => { const splitValues = splitValue(rawValue, allowImportant); if (splitValues.length === 1) { return [['marginBlock', rawValue]]; @@ -57,7 +62,11 @@ const shorthandAliases = { ['marginBlockEnd', right], ]; }, - margin: (rawValue: number | string, allowImportant: boolean = false) => { + margin: ( + rawValue: number | string, + allowImportant: boolean = false, + preferInline: boolean = false, + ) => { const splitValues = splitValue(rawValue, allowImportant); if (splitValues.length === 1) { return [['margin', rawValue]]; @@ -65,14 +74,25 @@ const shorthandAliases = { const [top, right = top, bottom = top, left = right] = splitValues; - return [ - ['marginTop', top], - ['marginInlineEnd', right], - ['marginBottom', bottom], - ['marginInlineStart', left], - ]; + 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) => { + padding: ( + rawValue: number | string, + allowImportant: boolean = false, + preferInline: boolean = false, + ) => { const splitValues = splitValue(rawValue, allowImportant); if (splitValues.length === 1) { return [['padding', rawValue]]; @@ -83,16 +103,24 @@ const shorthandAliases = { allowImportant, ); - return [ - ['paddingTop', top], - ['paddingInlineEnd', right], - ['paddingBottom', bottom], - ['paddingInlineStart', left], - ]; + 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 = splitValue(rawValue, allowImportant); if (splitValues.length === 1) { @@ -107,6 +135,7 @@ const shorthandAliases = { paddingBlock: ( rawValue: number | string, allowImportant: boolean = false, + _preferInline: boolean = false, ) => { const splitValues = splitValue(rawValue, allowImportant); if (splitValues.length === 1) { @@ -143,6 +172,10 @@ const stylexValidShorthands = { type: 'boolean', default: false, }, + preferInline: { + type: 'boolean', + default: false, + }, }, additionalProperties: false, }, @@ -151,6 +184,7 @@ const stylexValidShorthands = { create(context: Rule.RuleContext): { ... } { const options = context.options[0] || {}; const allowImportant = options.allowImportant || false; + const preferInline = options.preferInline || false; function validateObject(obj: ObjectExpression) { for (const prop of obj.properties) { @@ -181,7 +215,7 @@ const stylexValidShorthands = { if (typeof key === 'string' && key in legacyNameMapping) { context.report({ node: property, - message: `Use ${legacyNameMapping[key]} instead of legacy formats like ${key} to adhere to logical property naming.`, + message: `Use "${legacyNameMapping[key]}" instead of legacy formats like "${key}" to adhere to logical property naming.`, fix: (fixer) => { // $FlowFixMe - We've already checked that key is a string and in legacyNameMapping return fixer.replaceText(property.key, legacyNameMapping[key]); @@ -200,6 +234,7 @@ const stylexValidShorthands = { const newValues = shorthandAliases[key]( property.value.value, allowImportant, + preferInline, ); if (newValues.length === 1) { @@ -209,7 +244,7 @@ const stylexValidShorthands = { context.report({ node: property, - message: `Property shorthands using multiple values like ${key}: ${String(property.value.value)} are not supported in StyleX. Separate into individual properties.`, + message: `Property shorthands using multiple values like "${key}: ${String(property.value.value)}" are not supported in StyleX. Separate into individual properties.`, data: { property: key, },