[feat] Simple sx={} syntax as an alternative to stylex.props

[nmn]

What changed / motivation ?

This adds a small syntactic sugar to allow using a sx= prop on lower-case html JSX elements as an alternative to {...stylex.props}

So you can write:

<div sx={[styles.foo, styles.bar]} />

instead of

<div {...stylex.props(styles.foo, styles.bar)} />

if you want.

This addresses a very common complaint.

Additional Context

A single test has been added.

This PR is not quite ready to merge yet. The transformation is currently hardcoded.

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.

benchmarks@0.15.3 compare
node ./compare.js /tmp/tmp.LpDEPTYkie /tmp/tmp.HqZx70gR44

Results	Base	Patch	Ratio
babel-plugin: stylex.create
· basic create	653	635	0.97	-
· complex create	192	187	0.97	-
babel-plugin: stylex.createTheme
· basic themes	458	450	0.98	-
· complex themes	43	42	0.98	-

[github-actions]

workflow: benchmarks/size

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

benchmarks@0.15.3 compare
node ./compare.js /tmp/tmp.efLTW28HRL /tmp/tmp.w4ewnaZt6s

Results	Base	Patch	Ratio
@stylexjs/stylex/lib/cjs/stylex.js
· compressed	1,190	1,190	1.00
· minified	3,541	3,541	1.00
@stylexjs/stylex/lib/cjs/inject.js
· compressed	1,223	1,223	1.00
· minified	3,216	3,216	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

[xrzhuang]

omg i need this now !!!!

ship it 🚀

[mellyeliu]

not sure if we could use this internally with Flow etc, but will try to collect feedback on naming regardless

[matclayton]

This would be amazing, if you could get it working on flow especially. We're migrating to stylex at the moment and this is one of my personal pet peeves. We're also on flow (and relay), could you get the flow team to add a custom config like relay has relay_integration=true so it becomes stylex aware, and handles it accordingly?

[zaydek]

This would be a big help. Would love to see this so I don't have to alternate between {...stylex.props(…)} and sx={…} depending on if it's an intrinsic element or a component.

[mellyeliu]

Will sync with the Flow team on support for this

[matclayton]

@mellyeliu did you hear from the flow team. Super interested as we’re starting a large styled components to stylex conversion on a flow code base. This was one of the major sticking points internally and it would be great to know the direction you guys are thinking about.

[refirst11]

<div stylex={[styles.foo, styles.bar]} />

It's a naming problem, but in the case of sx={}, I feel like it's easy to confuse it with the method of directly describing the object of the component library. Intuitively, I thought of stylex={} as an upgraded version of React's style={}.
That said, I understand the ergonomics argument. If typos are a concern, they could be caught with ESLint rules.

Just wanted to share this perspective.

[mellyeliu]

@matclayton will prioritize this soon! hoping to get some broader Flow integration help from the team

[henryqdineen]

So with TypeScript would consumers have to do something like this or would the StyleX typedefs set it?

declare module 'react' {
  interface HTMLAttributes<T> {
    sx?: StyleXStyles 
  }  
}

[predaytor]

may I ask what progress has been made on this? really neat addition!

[skovhus]

We are also curious how settled the API is? Would really love to start using this, and are okay with patching if the API is fairly stable.

[predaytor]

<div stylex={[styles.foo, styles.bar]} />

It's a naming problem, but in the case of sx={}, I feel like it's easy to confuse it with the method of directly describing the object of the component library. Intuitively, I thought of stylex={} as an upgraded version of React's style={}. That said, I understand the ergonomics argument. If typos are a concern, they could be caught with ESLint rules.

Just wanted to share this perspective.

I too share this concern. sx={} seems a bit short. stylex={} or being able to specify your own keyword in the babel config would be a plus.

[mellyeliu]

I haven't forgotten about this. Will share an update by next week, thank you all for the patience!

[mellyeliu]

The Flow team is investigating adding a flowconfig or something similar for this, cc: @panagosg7

[skovhus]

@mellyeliu thanks for giving an update. As this seems to be part the roadmap, would it be possible to release this as an experimental feature without flow support? Or at least confirm if the API is settled?