[feat] StyleX Dev Tools Extension

[nmn]

What changed / motivation ?

A work-in-progress implementation of a devtools extension for StyleX and atomic styles in general.

Features:

• Use data-style-src to list the sources of styles in order
  • Preview the relevant StyleX style objects inline
  • One click action to show the original styles in the original file in the sources tab.
  • Detect which style properties from each object are overridden
• List all atomic styles that are actually applied by className
• Ability to edit/override styles
• Ensure it works without runtime injection
• Good styles with light and dark mode
• Good styles for editing styles
• Show computed values on hover

Additional Context

Current Status:
(hovering on a property shows the computed style)

Pre-flight checklist

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

[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.qZcGVZDVoX /tmp/tmp.NG8yb76VYW

Results	Base	Patch	Ratio
babel-plugin: stylex.create
· basic create	545	546	1.00	+
· complex create	65	67	1.03	+
babel-plugin: stylex.createTheme
· basic themes	421	428	1.02	+
· complex themes	34	35	1.03	+

[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.UQbkM03yg7 /tmp/tmp.WB1sjW3wkp

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,853	1.00
· minified	747,541	747,541	1.00

[henryqdineen]

I'm curious how resource-matching works when things are bundled in dev mode like in webpack/rspack. In my experimentation I found that getResources() only returns the actual resources that are loaded over the network. So if the styles are in Button.tsx and bundled into app.js how do you make that connection?