[eslint-plugin] Animation shorthand expansion

[abhakat]

What changed / motivation ?

Added animation shorthand expansion to stylex-valid-shorthands following the same createSpecificTransformer pattern used by existing shorthand expanders.

This change makes the rule report and autofix animation shorthand values into longhands for supported single-animation inputs.

Changes:

• Added animation: createSpecificTransformer('animation') to shorthand aliases.
• Added expandAnimationShorthand() in splitShorthands.js to parse and expand:
  • animationDuration
  • animationTimingFunction
  • animationDelay
  • animationIterationCount
  • animationDirection
  • animationFillMode
  • animationPlayState
  • animationName
• Added animation dispatch in splitSpecificShorthands.
• Added robust test coverage for common and edge shorthand forms.

Supported behavior:

• Duration/name (slidein 3s)
• Timing functions (ease-in, cubic-bezier(...), steps(...), linear(...))
• Delay (slidein 3s 1s)
• Iteration count including pre-duration order (2 3s slidein)
• Direction / fill-mode / play-state keywords
• !important propagation to expanded longhands
• Multi-animation lists (comma-separated) are detected and returned as CANNOT_FIX

Safest semantic handling for ambiguous none:

• animation: '1s none' expands to both:
  • animationFillMode: 'none'
  • animationName: 'none'
• This preserves semantics for the ambiguous shorthand case.
• animation: 'fadein 1s none' expands to:
  • animationDuration: '1s'
  • animationFillMode: 'none'
  • animationName: 'fadein'

Motivation:

• Bring animation shorthand handling in line with existing shorthand autofix behavior.
• Reduce manual migration effort from shorthand to StyleX-preferred longhands.
• Keep autofix safe by avoiding multi-animation list rewrites and preserving ambiguous none semantics.

Linked PR/Issues

N/A

Additional Context

Example autofix:

• Input: animation: '3s ease-in 1s 2 reverse both paused slidein'
• Output:
  • animationDuration: '3s'
  • animationTimingFunction: 'ease-in'
  • animationDelay: '1s'
  • animationIterationCount: '2'
  • animationDirection: 'reverse'
  • animationFillMode: 'both'
  • animationPlayState: 'paused'
  • animationName: 'slidein'

Tests:

• npx jest --watchman=false --coverage=false stylex-valid-shorthands-test.js
• Result on this branch: PASS (95 passed, 0 failed)

Screenshots:

• N/A (ESLint rule + autofix behavior change)

Pre-flight checklist

• I have read the contributing guidelines
  Contribution Guidelines
• Performed a self-review of my code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
stylex	Skipped		Mar 20, 2026 10:44pm

[github-actions]

workflow: benchmarks/perf

Comparison of performance test results, measured in operations per second. Larger is better.
yarn workspace v1.22.22
yarn run v1.22.22
$ node ./compare.js /tmp/tmp.kRx6By4Y5O /tmp/tmp.Fw8LGCedMa

Results	Base	Patch	Ratio
babel-plugin: stylex.create
· basic create	515	540	1.05	+
· complex create	62	63	1.02	+
babel-plugin: stylex.createTheme
· basic themes	406	407	1.00	+
· complex themes	32	34	1.06	!!
Done in 0.09s.
Done in 0.33s.

[github-actions]

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.
yarn workspace v1.22.22
yarn run v1.22.22
$ node ./compare.js /tmp/tmp.NSV4JoskQG /tmp/tmp.Y48VHwCKgu

Results	Base	Patch	Ratio
@stylexjs/stylex/lib/cjs/stylex.js
· compressed	1,331	1,331	1.00
· minified	4,209	4,209	1.00
@stylexjs/stylex/lib/cjs/inject.js
· compressed	1,793	1,793	1.00
· minified	4,915	4,915	1.00
benchmarks/size/.build/bundle.js
· compressed	496,650	496,650	1.00
· minified	4,847,840	4,847,840	1.00
benchmarks/size/.build/stylex.css
· compressed	99,653	99,653	1.00
· minified	747,850	747,850	1.00
Done in 0.08s.
Done in 0.32s.

[mellyeliu]

hmmm don't think we need animationFillMode here - let's refactor and remove