Skip to content

[eslint-plugin] Add columnRule/columns/listStyle/caret shorthand expansion to stylex-valid-shorthands#1590

Open
abhakat wants to merge 3 commits intoflexflow-shorthand-autofixfrom
columns-liststyle-caret-shorthand-autofix
Open

[eslint-plugin] Add columnRule/columns/listStyle/caret shorthand expansion to stylex-valid-shorthands#1590
abhakat wants to merge 3 commits intoflexflow-shorthand-autofixfrom
columns-liststyle-caret-shorthand-autofix

Conversation

@abhakat
Copy link
Copy Markdown
Contributor

@abhakat abhakat commented Apr 6, 2026

Expand columnRule, columns, listStyle, and caret shorthands into their longhand
equivalents. columnRule reuses the existing border-like expansion. listStyle handles the
CSS none keyword correctly (applies to both type and image when unambiguous). columns uses
integer/length disambiguation to determine which value is width vs count.

Stack: 6/7 — depends on #1589

What changed / motivation ?

  • columnRule: '1px solid red'columnRuleWidth + columnRuleStyle + columnRuleColor
  • columns: '200px 3'columnWidth: '200px' + columnCount: '3'
  • listStyle: 'disc inside url(bullet.png)'listStyleType + listStylePosition + listStyleImage
  • caret: 'red bar'caretColor: 'red' + caretShape: 'bar'
  • Single values pass through unchanged

Linked PR/Issues

Follow-up to #1553, #1552

Additional Context

Added tests covering: single-value passthrough, multi-value expansion, none handling in
listStyle, auto/integer disambiguation in columns, reversed token order in caret, url() images.

Pre-flight checklist

@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 9:55pm

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
@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.i7pszqeqBC /tmp/tmp.dDX2gDlsiY

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

@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.ZR3t7oa7NK /tmp/tmp.GB0c0RyTx4

Results Base Patch Ratio
babel-plugin: stylex.create
· basic create 529 518 0.98 -
· complex create 64 60 0.94 !!
babel-plugin: stylex.createTheme
· basic themes 428 397 0.93 !!
· complex themes 34 32 0.94 !!
Done in 0.08s.
Done in 0.34s.

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