fix(eslint-plugin): Add missing valid-styles property validators

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';

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,