Enable "inherits: false" for some CSS vars

[philholden]

StyleX advises the sparing use of dynamic variables. For each CSS prop that has a dynamic potential a CSS var gets created in the style prop even if that style is never set. Our existing component library using Emotion has lots of dynamic style props (perhaps 20 for some components) however if we port this to StyleX this ends up generating inline styles for the props that are not used with the value set to initial:

<View margin={24} color={theme.brandColor} />

<div style="--margin: 24px; --color: #aabbcc"; --backgroundColor: initial;/>

It would be helpful to have a way to say to styleX for this dynamic property I want you to create a non inheritable variable. That way I would not need 20 --property: initial; vars being set on style. My guess is it may yield some performance potential as a non inheritable var is less to reason about and less style props are being set. You may want the vars to be slightly namespaced:

@property --xxbackgroundColor {
  syntax: "<color>";
  inherits: false;
  initial-value: currentColor;
}

[nmn]

This is a known issue. So far, I have put up #709 (which should land very soon), that removes all the variables that are currently set to initial. After this PR, only variables that are actually used end up in your inline styles.

A follow-up is planned where every variable that is created specifically for dynamic styles will be marked inherits: false.

[philholden]

Thanks is there something similar for nulls in transpiled code? I notice that if I set a property like padding, margin or border I get lots of lines for marginLeft, marginRight etc set to null. For border I get 27 lines of null props for one with a value set. In my transpiled button component 70% of the total LOC were null CSS typically for border, margin and padding:

308 Lines of code
215 Lines were devoted to null CSS props

Is there a reason these cannot just be left as undefined?

[nmn]

Yes. The reason for the null values in generated code is to ensure that "the last style applied always wins". The null values ensure that, for example, if you apply margin: 10 as the last style on an element any marginTop that may be have been applied previously will be overridden.

I'm working on an optimisation for how these nulls are applied which should make the total size of the JS much smaller. (It should already gzip very well).

However, I accept that this null does add a small amount of overhead. If you don't want this overhead you can configure StyleX to use styleResolution: 'property-specificity' instead. This
will get rid of null properties from the compiled code. However, the style merging will now work like React Native where a long hand property like marginTop will always take precedence over a shorthand property like margin, regardless of the order they're applied in.