Cleaning up CSS Properties with null value

[venututor]

Describe the issue

CSS Properties that are not defined end up in the bundle output. Don't know if its a known issue.

E.g.

{
    boxSizing: 'x9f619',
    borderWidth: 'xmkeg23',
    borderInlineWidth: null,
    borderInlineStartWidth: null,
    borderLeftWidth: null,
    borderInlineEndWidth: null,
    borderRightWidth: null,
    borderBlockWidth: null,
    borderTopWidth: null,
    borderBottomWidth: null,
    borderStyle: 'x1y0btm7',
    borderInlineStyle: null,
    borderInlineStartStyle: null,
    borderLeftStyle: null,
    borderInlineEndStyle: null,
    borderRightStyle: null,
    borderBlockStyle: null,
    borderTopStyle: null,
    borderBottomStyle: null,
    transition: 'xtvu293',
    transitionBehavior: null,
    transitionDelay: null,
    transitionDuration: null,
    transitionProperty: null,
    transitionTimingFunction: null,
    outlineOffset: 'x1cm8ssg',
    transform: 'x1sjarlb',
    $$css: !0,
}

I only defined properties that have class rest are all added to the output.

Expected behavior

It would be great to clean up this unnecessary CSS Properties from the bundle output. This is not affecting any UI or causing issue, its just end up in the final bundle which essentially increases the bundle size.

Steps to reproduce

1. Rollup
2. JavaScript(No framework)
3. @stylexjs/rollup-plugin

I defined stylex CSS with create API and used @stylexjs/rollup-plugin plugin. The output looked like above.

Test case

No response

Additional comments

No response

[Jta26]

Unless I'm mistaken, I think this behavior is intended in order to ensure that the last style always wins. It seems to be setting null here in order to override more specific styles that potentially come from other stylex.create() calls that are passed in.

if you had some styles that define background color

const lessSpecificStyles = stylex.create({
  container: {
    background: 'green',
  },
});

const moreSpecificStyles = stylex.create({
  container: {
    backgroundColor: 'red'
  }
});

Setting these nulls allows you to use the less specific styles last, and still have them apply because lessSpecificStyles.container will set backgroundColor to null when it builds.

stylex([moreSpecificStyles.container, lessSpecificStyles.container]);

I'm not 100% sure if this is the reason though

[necolas]

Change styleResolution to property-specificity. The output will not contain that bloat https://stylexjs.com/docs/api/configuration/babel-plugin/#styleresolution

[nmn]

@Jta26 That is exactly the reason for this.

@venututor if you choose property-specificity styles merge the way they do in React Native, so be aware of the change in behaviour.