feat: create media query transformer to ensure last query wins

[mellyeliu]

create media query transformer to ensure “last query wins” logic

Context

Now that we have a usable media query parser in #743, we can finally implement last media query wins logic.

Implementation

High level approach: traverse through styles, search for media queries, do two passes at each node - one to build up a list of negations for each query, and another to apply the negation.

1. traverse nested styles with dfs

   • dfs to find all nested media queries
   • extract and flatten all media queries per into list for easier transformation

2. iterate media queries in reverse order

   • loop through the extracted media queries from last to first

3. accumulate negations
   -backwards, for single pass

• build up a list of negations from previous queries during reverse iteration
  • apply these negations to prevent earlier media queries from overriding more specific ones defined later

4. construct updated media queries
   • forwards order, because we need to reassign the object keys in the same order we see them to avoid breaking js object keys order
   • for each media query: use MediaQuery.parser.parseToEnd to convert query string into object representation

• append all accumulated negations to queries
  • stringify media query usingMediaQuery.toString()
  • append current queries to negations

5. return updated styles object with negated media queries

Testing

Use json.stringify to ensure object key order is maintained

Scenarios like:

• basic usage: multiple widths
• basic usage: complex styles object
• basic usage: lots and lots of widths
• nested queries
• handles comma-separated (or) media queries
• handles and media queries
• keywords
• combination of keywords and > rules

Missing:

• Nested not cases blocked on parsing issues

Pre-flight checklist

• I have read the contributing guidelines
  Contribution Guidelines
• Performed a self-review of my code

[github-actions]

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.

[email protected] compare
node ./compare.js /tmp/tmp.YE2LaIJ6Uz /tmp/tmp.cZHeGXE0mI

Results	Base	Patch	Ratio
stylex/lib/stylex.js
· compressed	985	985	1.00
· minified	3,154	3,154	1.00
stylex/lib/StyleXSheet.js
· compressed	1,266	1,266	1.00
· minified	3,776	3,776	1.00
benchmarks/size/.build/bundle.js
· compressed	537,611	537,611	1.00
· minified	7,435,904	7,435,904	1.00
benchmarks/size/.build/stylex.css
· compressed	100,609	100,609	1.00
· minified	755,721	755,721	1.00

[necolas]

What does "last wins" mean exactly in this context? FWIW, the "last wins" approach to property merging in StyleX is only true for properties with the same name. The way we handle short/long form merging (inc within a single style object) is really problematic and something we're trying to undo. So if last-wins for MQ is a local concern within a style, I'm concerned that will also be problematic. Anything that relies on order of keys in authored code is going to have those problems

[necolas]

We should be concerned at how bloated generated code gets with this approach

[nmn]

This is a bit of a work in progress where we will be simplifying the media queries as well.

[mellyeliu]

the doc here provides a bit more context - https://docs.google.com/document/d/1KlMnWz__zVBNcH_HQmd64sPEFf6AdaXeG46rL_eU5ec/edit?tab=t.uwqdsvafq1l7#heading=h.m5zrpmurwti

the plan is to eventually rewrite the media query parser to do the simplification step for us, or to pass this return to another fn to do a second round of parsing

[mellyeliu]

updated implementation to ensure object key ordering is preserved

[github-actions]

workflow: benchmarks/perf

Comparison of performance test results, measured in operations per second. Larger is better.

[email protected] compare
node ./compare.js /tmp/tmp.mOaO0JYlzi /tmp/tmp.c7c8WZQj4U

Results	Base	Patch	Ratio
babel-plugin: stylex.create
· basic create	537	540	1.01	+
· complex create	198	197	0.99	-
babel-plugin: stylex.createTheme
· basic themes	464	462	1.00	-
· complex themes	43	41	0.95	-

[mellyeliu]

ignore legacy media query syntax by checking dfs depth (>2)
ping @nmn pls review 👻

[nmn]

Please remove the console.logs at least before merging.

Further code improvements can be made later.