Shorthand style properties overwriting the more specific properties #2007

First i'd like to say I really appreciate this project, thanks everyone ❤️

The problem

Less specific shorthand style properties are being applied instead of the more specific styles if there is another element also with one of the more specific styles.

This is due to the common styles being pulled out as class names for de-duplication.

How to reproduce

Simplified test case: https://codesandbox.io/s/dazzling-gould-ihiig

Steps to reproduce:

1. Open the link
2. The second View has horizontal paddings of 8px instead of 40px

Note that moving the first View below the second causes the issue to go away.

Expected behavior

I expect the horizontal padding to be 40px as this matches the behaviour in React Native.

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.16.1
• React (version): 17.0.1
• Browser: Chrome

This appears to be an issue in previous versions as well

Additional context

I did some digging and this appears to be caused by the way that styles are de-duplicated. The first View get a class name applied with a padding-left & padding-right of 40px.

The second View then applies the same class and removes the horizontal padding in order to de-duplicate the styles. However this just leaves the padding: 8px in the style prop which then takes precedence over our de-duplicated padding class name. See here:

I believe this is caused by _resolveStyle here

I'm also willing to help out with a PR if someone can give me some pointers on the expected behaviour for how these styles should be applied.

Thanks 🙏