Implement proper css styles order of precedence

[Romick2005]

Generally I was try to fix the issue like this.
The thing was that after preprocessing styles and replacing non standard to standard css styling properties, the order of styles changed. For example initial style

{
  paddingTop: 0,
  paddingVertical: 10 
}

was converted to

{
  paddingBlock: 10,
  paddingTop: 0
}

So it lost initial style order and created new nextStyle object by dynamically adding properties, but in alphabetical order.
My solution is to 'destruct' (convert from long form to short). For example paddingVertical: 10 is converted into two properties: paddingTop and paddingBottom and only this properites is added to the final nextStyle object. This will automatically merge/override same style properties and emulate original web css stylinf behaviour (last added properties is applied). So in the end after preprocessing I got this styles for this case:

{
  paddingBottom: 10,
  paddingTop: 10
}

To demonstarate the issue I've also created a snack.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5ccd0c4:

Sandbox	Source
react-native-web-examples	Configuration

[necolas]

The description of the problem here is not very clear, but I can see from the unit tests that this patch is incorrect. The current behavior is how React Native works. Read the docs for more info https://necolas.github.io/react-native-web/docs/styling/#how-it-works

[Romick2005]

Yeah thank you for the link! I missed that part, thank you!

[Romick2005]

But if it is still web I expect it to work as styles like in web and not link it with the react native styling (which is different from web). So basically take a look at this styles tab in Chrome:

As you can see order is important and not more appropriate/matching style.

[necolas]

That's because you're using inline styles, which aren't 100% equivalent to RN. Use static styles. This is 100% not going to change because it's by design, and for good reasons already explained in the docs. Thanks

[Romick2005]

That's because you're using inline styles, which aren't 100% equivalent to RN. Use static styles. This is 100% not going to change because it's by design, and for good reasons already explained in the docs. Thanks

Not sure what do you mean static styles. Is it just class attribute? But it work the same way as inline styles. I assume that react-native-web does not respect css rules:

As you can see it works as expected, but not in react-native-web. That is why I tried to fix it.
The way how it is currently is working in RNW does not mean that it is always right way or I do not fully understand "good reasons already explained in the docs". So excuse me sir, you are doing a great job here and I just jump outside without knowing how inner cooking is working, sorry for this.
I understand that this will increase the number of created classes for each property, but I guess that should be also changed in the near future and properties name from style object should be used as prefix for class name + component name to guarantee uniqueness and reusability.

Note:
Css rule definition order in style tag is important. It is the same as just css style rule order that is not working in RNW.