Skip to content

Add opt-in compressed class names - #1840

Draft
nmn wants to merge 1 commit into
chore/better-compressed-keysfrom
feat/compressed-classnames
Draft

Add opt-in compressed class names#1840
nmn wants to merge 1 commit into
chore/better-compressed-keysfrom
feat/compressed-classnames

Conversation

@nmn

@nmn nmn commented Sep 3, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • add the enableCompressedClassnames compiler option, disabled by default
  • generate short class names for common simple declarations using the property prefixes introduced in Compress common CSS property keys #1839
  • cap readable class names at six characters and preserve hashing for complex, conditional, conflicting, or uncommon cases
  • add Flow and TypeScript config types, validation, documentation, and end-to-end coverage

Examples

  • margin: 0m0
  • margin: 4pxm4
  • paddingTop: 16pxpt16
  • display: flexd-f
  • position: absolutepo-a

Stacked on #1839.

Test plan

  • npm run build
  • npm run docs:build
  • npm run flow -- --show-all-errors
  • npm run typescript
  • npm run prettier:report
  • npm run lint:report
  • npm run test:packages

@vercel

vercel Bot commented Sep 3, 2026

Copy link
Copy Markdown

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

1 Skipped Deployment
Project Deployment Actions Updated
stylex Ignored Ignored Sep 3, 2026 8:26am UTC

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 Sep 3, 2026
@github-actions

github-actions Bot commented Sep 3, 2026

Copy link
Copy Markdown

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.2G3m1yNkMi /tmp/tmp.bVNfg7VgXY

Results Base Patch Ratio
babel-plugin: stylex.create
· basic create 764 770 1.01 +
· complex create 82 78 0.95 -
babel-plugin: stylex.createTheme
· basic themes 576 578 1.00 +
· complex themes 41 40 0.98 -
Done in 0.06s.
Done in 0.26s.

@github-actions

github-actions Bot commented Sep 3, 2026

Copy link
Copy Markdown

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.jz06E5dWy8 /tmp/tmp.yoWZxlU9BY

Results Base Patch Ratio
@stylexjs/stylex/lib/cjs/stylex.js
· compressed 1,535 1,535 1.00
· minified 5,166 5,166 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 486,580 486,580 1.00
· minified 4,076,568 4,076,568 1.00
benchmarks/size/.build/stylex.css
· compressed 99,757 99,757 1.00
· minified 748,850 748,850 1.00
Done in 0.07s.
Done in 0.31s.

@nmn
nmn force-pushed the feat/compressed-classnames branch from b931762 to f0cd590 Compare September 3, 2026 08:23
@nmn
nmn force-pushed the feat/compressed-classnames branch from f0cd590 to f90cc63 Compare September 3, 2026 08:26
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