Cleaning up CSS Properties with null value about stylex HOT 3 CLOSED

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

from stylex.

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

from stylex.

@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.

from stylex.