From 1906e4d090c38656f045f4a45d6a52af4881678e Mon Sep 17 00:00:00 2001 From: skovhus Date: Thu, 11 Jun 2026 20:28:24 +0200 Subject: [PATCH] Fix eslint property validation allowlist --- .../__tests__/stylex-valid-styles-test.js | 141 ++++++++++++++++++ .../src/reference/cssProperties.js | 81 ++++++---- 2 files changed, 197 insertions(+), 25 deletions(-) diff --git a/packages/@stylexjs/eslint-plugin/__tests__/stylex-valid-styles-test.js b/packages/@stylexjs/eslint-plugin/__tests__/stylex-valid-styles-test.js index 27f4cefbb..a473900fc 100644 --- a/packages/@stylexjs/eslint-plugin/__tests__/stylex-valid-styles-test.js +++ b/packages/@stylexjs/eslint-plugin/__tests__/stylex-valid-styles-test.js @@ -937,6 +937,47 @@ eslintTester.run('stylex-valid-styles', rule.default, { }); `, }, + { + code: ` + import * as stylex from '@stylexjs/stylex'; + const styles = stylex.create({ + supportedPropertyAllowlist: { + borderBlock: 'solid', + borderInline: 2, + container: 'card / inline-size', + fill: 'currentColor', + fillOpacity: 0.5, + fillRule: 'evenodd', + overflowBlock: 'auto', + overscrollBehaviorBlock: 'contain', + overscrollBehaviorInline: 'none', + scrollMargin: 4, + scrollMarginBlock: '1rem', + scrollMarginInline: 8, + scrollPadding: '2px', + scrollPaddingBlock: 10, + scrollPaddingInline: 'var(--space)', + scrollTimeline: '--main block', + scrollTimelineAxis: 'block', + scrollTimelineName: '--main', + stroke: 'none', + strokeDasharray: '4 2', + strokeDashoffset: 1, + strokeLinecap: 'round', + strokeLinejoin: 'bevel', + strokeMiterlimit: 4, + strokeOpacity: '0.5', + strokeWidth: 2, + textJustify: 'inter-word', + timelineScope: '--main', + viewTimeline: '--view inline', + viewTimelineAxis: 'inline', + viewTimelineInset: '20%', + viewTimelineName: '--view', + }, + }); + `, + }, // bare numbers for time-based properties { code: ` @@ -975,6 +1016,106 @@ eslintTester.run('stylex-valid-styles', rule.default, { }, ], }, + { + code: ` + import * as stylex from '@stylexjs/stylex'; + const styles = stylex.create({ + invalidAllowlistValues: { + scrollTimelineAxis: 'horizontal', + viewTimelineAxis: 'vertical', + textJustify: 'justify', + overscrollBehaviorInline: 'scroll', + overflowBlock: 'overlay', + fillRule: 'non-zero', + strokeLinecap: 'flat', + }, + }); + `, + errors: [ + { + message: `scrollTimelineAxis value must be one of: +block +inline +x +y +null +initial +inherit +unset +revert`, + }, + { + message: `viewTimelineAxis value must be one of: +block +inline +x +y +null +initial +inherit +unset +revert`, + }, + { + message: `textJustify value must be one of: +none +auto +inter-word +inter-character +distribute +null +initial +inherit +unset +revert`, + }, + { + message: `overscrollBehaviorInline value must be one of: +none +contain +auto +null +initial +inherit +unset +revert`, + }, + { + message: `overflowBlock value must be one of: +visible +hidden +clip +scroll +auto +null +initial +inherit +unset +revert`, + }, + { + message: `fillRule value must be one of: +nonzero +evenodd +null +initial +inherit +unset +revert`, + }, + { + message: `strokeLinecap value must be one of: +butt +round +square +null +initial +inherit +unset +revert`, + }, + ], + }, { code: ` import * as stylex from '@stylexjs/stylex'; diff --git a/packages/@stylexjs/eslint-plugin/src/reference/cssProperties.js b/packages/@stylexjs/eslint-plugin/src/reference/cssProperties.js index 29aaff2ed..08a4f8321 100644 --- a/packages/@stylexjs/eslint-plugin/src/reference/cssProperties.js +++ b/packages/@stylexjs/eslint-plugin/src/reference/cssProperties.js @@ -607,6 +607,11 @@ const borderCollapse: RuleCheck = makeUnionRule( makeLiteralRule('separate'), ); const borderColor: RuleCheck = color; +const borderBlockOrInline: RuleCheck = makeUnionRule( + borderWidth, + borderStyle, + color, +); const borderImage: RuleCheck = makeUnionRule( borderImageSource, borderImageSlice, @@ -1105,6 +1110,8 @@ const overscrollBehavior: RuleCheck = makeUnionRule( makeLiteralRule('contain'), makeLiteralRule('auto'), ); +const scrollSpacing: RuleCheck = makeUnionRule(isNumber, isString); +const timelineAxis: RuleCheck = makeUnionRule('block', 'inline', 'x', 'y'); const pageBreak: RuleCheck = makeUnionRule( makeLiteralRule('auto'), @@ -1262,6 +1269,13 @@ const textIndent: RuleCheck = makeUnionRule( makeLiteralRule('hanging'), makeLiteralRule('each-line'), ); +const textJustify: RuleCheck = makeUnionRule( + 'none', + 'auto', + 'inter-word', + 'inter-character', + 'distribute', +); const textOrientation: RuleCheck = makeUnionRule( makeLiteralRule('mixed'), makeLiteralRule('upright'), @@ -1728,6 +1742,7 @@ const CSSProperties = { borderRightColor: borderLeftColor, borderRightStyle: borderLeftStyle, borderRightWidth: borderLeftWidth, + borderInline: borderBlockOrInline, borderInlineEnd: showError( [ '`borderInlineEnd` is not supported. Please use', @@ -1753,6 +1768,7 @@ const CSSProperties = { borderInlineStartColor: borderLeftColor, borderInlineStartStyle: borderLeftStyle, borderInlineStartWidth: borderLeftWidth, + borderBlock: borderBlockOrInline, borderBlockEnd: showError( [ '`borderBlockEnd` is not supported. Please use', @@ -1841,6 +1857,7 @@ const CSSProperties = { containIntrinsicInlineSize: makeUnionRule(isNumber, isString) as RuleCheck, containIntrinsicHeight: makeUnionRule(isNumber, isString) as RuleCheck, containIntrinsicWidth: makeUnionRule(isNumber, isString) as RuleCheck, + container: isString, containerType: makeUnionRule('normal', 'size', 'inline-size') as RuleCheck, containerName: isString, content: content, @@ -2084,15 +2101,14 @@ const CSSProperties = { overflowAnchor: overflowAnchor, overflowClipBox: overflowClipBox, overflowWrap: overflowWrap, + overflowBlock: overflowDir, overflowX: overflowDir, overflowY: overflowDir, overscrollBehavior: overscrollBehavior, - // Currently Unsupported - // overscrollBehaviorInline: overscrollBehaviorX, + overscrollBehaviorInline: overscrollBehavior, overscrollBehaviorX: overscrollBehavior, overscrollBehaviorY: overscrollBehavior, - // Currently Unsupported - // overscrollBehaviorBlock: overscrollBehaviorY, + overscrollBehaviorBlock: overscrollBehavior, overflowClipMargin: makeUnionRule(isNumber, isString) as RuleCheck, paintOrder: makeUnionRule( @@ -2162,27 +2178,36 @@ const CSSProperties = { scrollSnapType: scrollSnapType, scrollSnapStop: makeUnionRule('normal', 'always') as RuleCheck, - // scrollMargin: makeUnionRule(isNumber, isString), - scrollMarginBlockEnd: makeUnionRule(isNumber, isString) as RuleCheck, - scrollMarginBlockStart: makeUnionRule(isNumber, isString) as RuleCheck, - scrollMarginBottom: makeUnionRule(isNumber, isString) as RuleCheck, - scrollMarginInlineEnd: makeUnionRule(isNumber, isString) as RuleCheck, - scrollMarginInlineStart: makeUnionRule(isNumber, isString) as RuleCheck, - scrollMarginLeft: makeUnionRule(isNumber, isString) as RuleCheck, - scrollMarginRight: makeUnionRule(isNumber, isString) as RuleCheck, - scrollMarginTop: makeUnionRule(isNumber, isString) as RuleCheck, - scrollPaddingBlockEnd: makeUnionRule(isNumber, isString) as RuleCheck, - scrollPaddingBlockStart: makeUnionRule(isNumber, isString) as RuleCheck, - scrollPaddingBottom: makeUnionRule(isNumber, isString) as RuleCheck, - scrollPaddingInlineEnd: makeUnionRule(isNumber, isString) as RuleCheck, - scrollPaddingInlineStart: makeUnionRule(isNumber, isString) as RuleCheck, - scrollPaddingLeft: makeUnionRule(isNumber, isString) as RuleCheck, - scrollPaddingRight: makeUnionRule(isNumber, isString) as RuleCheck, - scrollPaddingTop: makeUnionRule(isNumber, isString) as RuleCheck, - scrollSnapMarginBottom: makeUnionRule(isNumber, isString) as RuleCheck, - scrollSnapMarginLeft: makeUnionRule(isNumber, isString) as RuleCheck, - scrollSnapMarginRight: makeUnionRule(isNumber, isString) as RuleCheck, - scrollSnapMarginTop: makeUnionRule(isNumber, isString) as RuleCheck, + scrollMargin: scrollSpacing, + scrollMarginBlock: scrollSpacing, + scrollMarginBlockEnd: scrollSpacing, + scrollMarginBlockStart: scrollSpacing, + scrollMarginBottom: scrollSpacing, + scrollMarginInline: scrollSpacing, + scrollMarginInlineEnd: scrollSpacing, + scrollMarginInlineStart: scrollSpacing, + scrollMarginLeft: scrollSpacing, + scrollMarginRight: scrollSpacing, + scrollMarginTop: scrollSpacing, + scrollPadding: scrollSpacing, + scrollPaddingBlock: scrollSpacing, + scrollPaddingBlockEnd: scrollSpacing, + scrollPaddingBlockStart: scrollSpacing, + scrollPaddingBottom: scrollSpacing, + scrollPaddingInline: scrollSpacing, + scrollPaddingInlineEnd: scrollSpacing, + scrollPaddingInlineStart: scrollSpacing, + scrollPaddingLeft: scrollSpacing, + scrollPaddingRight: scrollSpacing, + scrollPaddingTop: scrollSpacing, + scrollSnapMarginBottom: scrollSpacing, + scrollSnapMarginLeft: scrollSpacing, + scrollSnapMarginRight: scrollSpacing, + scrollSnapMarginTop: scrollSpacing, + + scrollTimeline: isString, + scrollTimelineAxis: timelineAxis, + scrollTimelineName: isString, shapeImageThreshold: shapeImageThreshold, shapeMargin: lengthPercentage, @@ -2226,6 +2251,7 @@ const CSSProperties = { textEmphasisPosition: textEmphasisPosition, textEmphasisStyle: textEmphasisStyle, textIndent: textIndent, + textJustify: textJustify, textOrientation: textOrientation, textOverflow: textOverflow, textRendering: textRendering, @@ -2242,6 +2268,7 @@ const CSSProperties = { 'stable', ) as RuleCheck, + timelineScope: isString, touchAction: touchAction, transform: transform, transformBox: transformBox, @@ -2255,6 +2282,10 @@ const CSSProperties = { unicodeBidi: unicodeBidi, unicodeRange: unicodeRange, userSelect: userSelect, + viewTimeline: isString, + viewTimelineAxis: timelineAxis, + viewTimelineName: isString, + viewTimelineInset: scrollSpacing, viewTransitionName: makeUnionRule(all, isString) as RuleCheck, verticalAlign: verticalAlign, visibility: visibility,