StyleX plug-in for resolving atomic styles to values for props.xstyle

[bvaughn]

Adds the concept of "plugins" to the inspected element payload. Also adds the first plugin, one that resolves StyleX atomic style names to their values and displays them as a unified style object (rather than a nested array of objects and booleans).

Note the new "stylex" panel below the props panel. Source file names are displayed first, in dim color, followed by an ordered set of resolved style values:

A more complex set of styles (from multiple sources) can be seen here:

Compare the new display to the behavior of viewing the xstyle prop directly:

For builds with the new feature flag disabled, there is no observable change.

A next step to build on top of this could be to make the style values editable, but change the logic such that editing one directly added an inline style to the item (rather than modifying the stylex class– which may be shared between multiple other components).

[sebmarkbage]

Fwiw, I'm going to open a PR with a proposal to change stylex to a plain object.

[bvaughn]

Fwiw, I'm going to open a PR with a proposal to change stylex to a plain object.

@sebmarkbage Can you elaborate a little here to help me understand what the proposed change is, how long it until it might land, how likely it is to land, etc.

This feature was requested by FB engineers working with StyleX, along with a few others (which I haven't pushed yet) to help them with every day productivity issues.

[necolas]

stylex's babel plugin can inline classnames with no style object left in the code, e.g., className="krdjnda erwlkre"

I wonder if we might have better options for identifying all stylex data defined using stylex.create rather than only the xstyle convention in Comet.

[bvaughn]

stylex's babel plugin can inline classnames with no style object left in the code, e.g., className="krdjnda erwlkre"

I'm not sure how we would detect the presence of StyleX (vs any other styling library) in that scenario. Any ideas?

I wonder if we might have better options for identifying all stylex data defined using stylex.create rather than only the xstyle convention in Comet.

Trying to limit the scope of this change by rolling it out within Facebook only, for starters.

I like this suggestion in the longer term, although I'm also not sure of a way (currently) to identify values created by stylex.create.

[jstejada]

lgtm!