Skip to content

Improved media query sorting #1438

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
abhakat wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Improved media query sorting #1438

abhakat wants to merge 5 commits into from

Conversation

@abhakat
Copy link
Contributor

@abhakat abhakat commented Jan 5, 2026

What changed / motivation ?

  • Improved media query sorting in generated CSS to order queries by breakpoint size
  • Media queries with min-width are sorted from largest to smallest value
  • Media queries with max-width are sorted from smallest to largest value
  • Optimized performance by precompiling regex patterns once at module import time

Linked PR/Issues

Better media query sorting #1407

Additional Context

Ran and updated tests.

Pre-flight checklist

@vercel
Copy link

vercel bot commented Jan 5, 2026 •
edited
Loading

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

Project Deployment Review Updated (UTC)
stylex Ready Ready Preview, Comment Jan 7, 2026 9:24pm

@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 Jan 5, 2026
@github-actions
Copy link

github-actions bot commented Jan 5, 2026 •
edited
Loading

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.IunP02CnH0 /tmp/tmp.1mAqpZQzCz

Results Base Patch Ratio
babel-plugin: stylex.create
· basic create 459 534 1.16 !!
· complex create 62 63 1.02 +
babel-plugin: stylex.createTheme
· basic themes 350 398 1.14 !!
· complex themes 33 33 1.00
Done in 0.07s.
Done in 0.30s.

@github-actions
Copy link

github-actions bot commented Jan 5, 2026 •
edited
Loading

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.nWKE2kRWgq /tmp/tmp.4FwlFeMxIY

Results Base Patch Ratio
@stylexjs/stylex/lib/cjs/stylex.js
· compressed 1,311 1,311 1.00
· minified 4,150 4,150 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,853 99,073 0.99 -
· minified 747,541 724,061 0.97 -
Done in 0.08s.
Done in 0.33s.

@abhakat abhakat force-pushed the improved-media-query-sorting branch from bd9b294 to 0907967 Compare January 5, 2026 19:17
mellyeliu
mellyeliu requested changes Jan 6, 2026
View reviewed changes
Copy link
Member

@mellyeliu mellyeliu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couple changes! Let's also add this behind a config within processStylexRules so we can roll it out easily - there are breakpoints that will shift internally.

packages/@stylexjs/babel-plugin/__tests__/transform-stylex-props-test.js
0: {
className: "xrvj5dj x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4",
"data-style-src": "../../../../../../../../../html/js/FooBar.react.js:11; ../../../../../../../../../html/js/FooBar.react.js:16"
"data-style-src": "../../../../../../../html/js/FooBar.react.js:11; ../../../../../../../html/js/FooBar.react.js:16"
Copy link
Member

@mellyeliu mellyeliu Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are irrelevant, you might need to do a clean yarn install

packages/@stylexjs/babel-plugin/src/index.js Outdated
return classname1.localeCompare(classname2);
} else {
if (rule1.startsWith('@') && !rule2.startsWith('@')) {
if (rule1.startsWith('@') && rule2.startsWith('@')) {
Copy link
Member

@mellyeliu mellyeliu Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't want to affect the sorting of other at-rules like @keyframes or similar. Let's limit this to media queries first (@media)

nmn
nmn requested changes Jan 8, 2026
View reviewed changes
packages/@stylexjs/babel-plugin/src/index.js
Comment on lines +489 to +495
if (maxWidth1Match && maxWidth2Match) {
const value1 = parseFloat(maxWidth1Match[1]);
const value2 = parseFloat(maxWidth2Match[1]);
if (value1 !== value2) {
return value1 - value2;
}
}
Copy link
Collaborator

@nmn nmn Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This comparison currently sorts while ignoring the unit. I'd suggest either assuming that 1rem === 16px for the sake of comparison, or, always sorting by units first, such, that rem < em < px as we can assume px media queries are more "specific".

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

Reviewers

@nmn nmn nmn requested changes

@mellyeliu mellyeliu mellyeliu requested changes

@ezzak ezzak Awaiting requested review from ezzak ezzak is a code owner

@necolas necolas Awaiting requested review from necolas necolas is a code owner

@vincentriemer vincentriemer Awaiting requested review from vincentriemer vincentriemer is a code owner

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

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

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@abhakat @nmn @mellyeliu