workflow: benchmarks/size

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

@stylexjs/[email protected] size:compare
./size-compare.js /tmp/tmp.lCRZ6UqDYV /tmp/tmp.2mBN5zIAzV

Should the types be under stylex.types instead?

I think this is a better organization in terms of usage with stylex.types functions, however it's kinda confusing when you have stylex.StaticStyles, which is also a "type". So the naming between TS/Flow types and CSS value types is kinda confusing.

This is also kinda awkward, but maybe valueTypes is better. This aligns with the actual name for such things.

https://www.w3.org/TR/css3-values/#component-types

This is also kinda awkward, but maybe valueTypes is better. This aligns with the actual name for such things.

I don't know if it's worth renaming the existing public APIs such as stylex.types.color() etc. And so it might make sense to keep that name.

stylex.types is about CSS types and not TS/Flow types such as stylex.StyleXStyles. Can we clarify this with documentation or is it too confusing and something that warrants an API change?

Can we clarify this with documentation

Yeah documentation is probably the best way to disambiguate this.

There was no clean way to embed types under stylex.types that worked for both Flow and TS, so the types are now under stylex.Types.*.

This raises the question, is that the right name?

Should it be stylex.VarTypes.*? Or is stylex.Types better because it matches stylex.types?

stylex.Types is next best imo.

Will the usage look like this?

xstyle: stylex.StaticStyles<{
 backgroundColor: stylex.Types.Color, (null | string)
 marginInlineStart: stylex.Types.Length, (null | string | number)
}>