From 1550f11238f387877c4f7eaac61be7ea55fceedf Mon Sep 17 00:00:00 2001
From: skovhus <kenneth.skovhus@gmail.com>
Date: Thu, 4 Jun 2026 15:05:40 +0200
Subject: [PATCH] Add valid-styles support for scroll timelines

---
 .../eslint-plugin/__tests__/stylex-valid-styles-test.js  | 9 +++++++++
 .../eslint-plugin/src/reference/cssProperties.js         | 9 +++++++++
 packages/@stylexjs/stylex/src/types/StyleXCSSTypes.js    | 2 ++
 3 files changed, 20 insertions(+)

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..a3eadca18 100644
--- a/packages/@stylexjs/eslint-plugin/__tests__/stylex-valid-styles-test.js
+++ b/packages/@stylexjs/eslint-plugin/__tests__/stylex-valid-styles-test.js
@@ -520,6 +520,15 @@ eslintTester.run('stylex-valid-styles', rule.default, {
          'containIntrinsicSize': 'auto 300px',
        },
      })`,
+    `import * as stylex from '@stylexjs/stylex';
+     stylex.create({
+       default: {
+         scrollTimeline: '--main-scroll block',
+         scrollTimelineAxis: 'inline',
+         scrollTimelineName: '--main-scroll',
+         WebkitAppRegion: 'drag',
+       },
+     })`,
     `import * as stylex from '@stylexjs/stylex';
      stylex.create({
        a: {
diff --git a/packages/@stylexjs/eslint-plugin/src/reference/cssProperties.js b/packages/@stylexjs/eslint-plugin/src/reference/cssProperties.js
index 29aaff2ed..7bc100760 100644
--- a/packages/@stylexjs/eslint-plugin/src/reference/cssProperties.js
+++ b/packages/@stylexjs/eslint-plugin/src/reference/cssProperties.js
@@ -1183,6 +1183,12 @@ const scrollSnapType: RuleCheck = makeUnionRule(
   makeLiteralRule('x mandatory'),
   makeLiteralRule('y mandatory'),
 );
+const scrollTimelineAxis: RuleCheck = makeUnionRule(
+  makeLiteralRule('block'),
+  makeLiteralRule('inline'),
+  makeLiteralRule('x'),
+  makeLiteralRule('y'),
+);
 const shapeImageThreshold: RuleCheck = isStringOrNumber;
 const shapeOutside: RuleCheck = makeUnionRule(
   makeLiteralRule('none'),
@@ -2161,6 +2167,9 @@ const CSSProperties = {
   scrollSnapAlign: scrollSnapAlign,
   scrollSnapType: scrollSnapType,
   scrollSnapStop: makeUnionRule('normal', 'always') as RuleCheck,
+  scrollTimeline: isString,
+  scrollTimelineAxis: scrollTimelineAxis,
+  scrollTimelineName: isString,
 
   // scrollMargin: makeUnionRule(isNumber, isString),
   scrollMarginBlockEnd: makeUnionRule(isNumber, isString) as RuleCheck,
diff --git a/packages/@stylexjs/stylex/src/types/StyleXCSSTypes.js b/packages/@stylexjs/stylex/src/types/StyleXCSSTypes.js
index 2f906c3b0..bed3dfdf8 100644
--- a/packages/@stylexjs/stylex/src/types/StyleXCSSTypes.js
+++ b/packages/@stylexjs/stylex/src/types/StyleXCSSTypes.js
@@ -958,6 +958,7 @@ type OptionalArray<T> = Array<T> | T;
 export type SupportedVendorSpecificCSSProperties = Readonly<{
   MozOsxFontSmoothing?: null | 'grayscale',
   WebkitAppearance?: null | appearance,
+  WebkitAppRegion?: null | 'drag' | 'no-drag',
   WebkitFontSmoothing?: null | 'antialiased',
   WebkitTapHighlightColor?: null | color,
 }>;
@@ -969,6 +970,7 @@ export type CSSProperties = Readonly<{
   // ...$Exact<SupportedVendorSpecificCSSProperties>, for TypeScript compatibility
   MozOsxFontSmoothing?: all | 'grayscale',
   WebkitAppearance?: all | appearance,
+  WebkitAppRegion?: all | 'drag' | 'no-drag',
   WebkitFontSmoothing?: all | 'antialiased',
   WebkitTapHighlightColor?: all | color,