Skip to content

[eslint-plugin] Add shorthand expansion for logical borders, overflow, inset, place-*, flexFlow, columns, listStyle, caret, textDecoration#1579

Closed
abhakat wants to merge 10 commits intomainfrom
text-decoration-shorthand-autofix
Closed

[eslint-plugin] Add shorthand expansion for logical borders, overflow, inset, place-*, flexFlow, columns, listStyle, caret, textDecoration#1579
abhakat wants to merge 10 commits intomainfrom
text-decoration-shorthand-autofix

Conversation

@abhakat
Copy link
Copy Markdown
Contributor

@abhakat abhakat commented Apr 6, 2026

Adds shorthand expansion autofixers to stylex-valid-shorthands for 15+ CSS shorthand properties that were previously unsupported. Each shorthand follows the same createSpecificTransformer pattern used by existing handlers (border, gap, flex, animation, etc.).

What changed / motivation ?

The stylex-valid-shorthands rule already auto-fixed border, borderTop/Right/Bottom/Left, margin, padding, flex, gap, animation, font, outline, background, and grid properties. This PR extends coverage to the remaining common shorthands:

Logical border shorthands:

  • borderInlineEnd, borderInlineStart, borderBlockEnd, borderBlockStart → Width/Style/Color longhands
  • borderInline, borderBlock → Width/Style/Color longhands
  • borderInlineColor/Style/Width, borderBlockColor/Style/Width → Start/End longhands

Layout shorthands:

  • overflow: 'hidden scroll'overflowX: 'hidden' + overflowY: 'scroll'
  • overscrollBehavior: 'contain auto'overscrollBehaviorX + overscrollBehaviorY
  • inset: '0 10px'insetBlock + insetInline (2-value); top/right/bottom/left (3-4 value)
  • insetBlock/insetInline → Start/End longhands
  • placeContent: 'center space-between'alignContent + justifyContent
  • placeItems/placeSelf → align/justify longhands
  • flexFlow: 'row wrap'flexDirection + flexWrap (with token validation)

Other shorthands:

  • columnRule: '1px solid red'columnRuleWidth + columnRuleStyle + columnRuleColor
  • columns: '200px 3'columnWidth + columnCount (with integer/length disambiguation)
  • listStyle: 'disc inside url(bullet.png)'listStyleType + listStylePosition + listStyleImage
  • caret: 'red bar'caretColor + caretShape
  • textDecoration: 'underline solid red 2px'textDecorationLine + textDecorationStyle + textDecorationColor + textDecorationThickness

All handlers:

  • Pass through single-value properties unchanged (no false positives)
  • Return CANNOT_FIX for ambiguous/unparseable values (commas, slashes, too many tokens)
  • Propagate !important when allowImportant is enabled
  • Are fully tested with valid (passthrough) and invalid (expansion + CANNOT_FIX) cases

Linked PR/Issues

Follow-up to #1553, #1552, #1538, #1537

Additional Context

Tests: npx jest --watchman=false stylex-valid-shorthands-test.js — all 569 tests pass.

Files changed: 3

  • src/stylex-valid-shorthands.js — register new shorthands in shorthandAliases
  • src/utils/splitShorthands.js — expansion logic for each shorthand
  • __tests__/stylex-valid-shorthands-test.js — ~1250 new lines of test coverage

Pre-flight checklist

Anay Bhakat added 10 commits April 3, 2026 13:45
…d-shorthands

Expand logical border shorthands into their longhand equivalents. These
properties currently hard-error in stylex-valid-styles via showError with
no autofix path.

Tier 1 — 3-part border expansion (width/style/color):
  borderInlineEnd, borderInlineStart, borderBlockEnd, borderBlockStart,
  borderInline, borderBlock

Tier 2 — 2-value sub-shorthand expansion (start/end):
  borderInlineColor, borderInlineStyle, borderInlineWidth,
  borderBlockColor, borderBlockStyle, borderBlockWidth
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 6, 2026

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

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
stylex Skipped Skipped Apr 6, 2026 6:06pm

Request Review

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Apr 6, 2026
@abhakat abhakat closed this Apr 6, 2026
@abhakat abhakat deleted the text-decoration-shorthand-autofix branch April 6, 2026 18:10
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 6, 2026

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.iBxnw0oXCh /tmp/tmp.ydGnTQKfHM

Results Base Patch Ratio
babel-plugin: stylex.create
· basic create 539 552 1.02 +
· complex create 63 66 1.05 +
babel-plugin: stylex.createTheme
· basic themes 428 435 1.02 +
· complex themes 34 34 1.00
Done in 0.08s.
Done in 0.32s.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 6, 2026

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.vaxbEBXnRV /tmp/tmp.zujWEiYE7I

Results Base Patch Ratio
@stylexjs/stylex/lib/cjs/stylex.js
· compressed 1,441 1,441 1.00
· minified 4,386 4,386 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.35s.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant