[eslint-plugin] Add flex shorthand expansion to stylex-valid-shorthands

[abhakat]

What changed / motivation ?

Added flex shorthand expansion to stylex-valid-shorthands using the same createSpecificTransformer pattern already used for background, font, border, grid, and outline.

Changes:

• Added flex: createSpecificTransformer('flex') to shorthand aliases.
• Added expandFlexShorthand() in splitShorthands.js plus helper classifiers for:
  • unitless flex numbers (flex-grow / flex-shrink)
  • valid basis values (auto, content, min-content, max-content, fit-content, calc()/min()/max()/clamp()/fit-content(), var(), unit/percent values)
• Added property === 'flex' dispatch in splitSpecificShorthands before generic single-value passthrough so cases like flex: 1 still expand.
• Added/updated tests covering:
  • keywords: auto, none, initial
  • single number
  • single basis
  • two-value forms (grow shrink, grow basis)
  • three-value form (grow shrink basis)
  • calc() basis
  • !important propagation

Behavior:

• flex: '1 0 auto' now reports and autofixes to:
  • flexGrow: '1'
  • flexShrink: '0'
  • flexBasis: 'auto'

Motivation:

• flex shorthand is common in StyleX authoring and migration paths.
• Previously this pattern was flagged but not expanded as a first-class shorthand.
• This brings flex in line with existing shorthand autofix behavior while keeping fixes safe and deterministic.

Linked PR/Issues

N/A

Additional Context

Example autofix:

• Input: flex: '1 0 auto'
• Output: flexGrow: '1', flexShrink: '0', flexBasis: 'auto'

Tests:

• npx jest --watchman=false --coverage=false stylex-valid-shorthands-test.js
• Result: PASS (94 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:32pm

[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.nh8p2bcUQc /tmp/tmp.vFtxCVOe5q

Results	Base	Patch	Ratio
babel-plugin: stylex.create
· basic create	557	565	1.01	+
· complex create	70	70	1.00
babel-plugin: stylex.createTheme
· basic themes	426	428	1.00	+
· complex themes	36	36	1.00
Done in 0.10s.
Done in 0.31s.

[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.k7JWSfTCXn /tmp/tmp.2s8tO47aGm

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.07s.
Done in 0.34s.

[skovhus]

I'm not sure I follow the motivation here, the compiler doesn't require them expanded.

And the linter didn't flag flex: "auto" as problematic before, so why do we force people to expand them? @mellyeliu ? @abhakat ?

[skovhus]

I still find this change very restrictive. Can we add a linter config option?