Bug: styles object using css variables and both a shorthand and a specific property renders incorrectly

React does not produce the correct css inline styles when using css variables for both the shorthand property and another specific one (like `padding` and `paddingRight`). The styles object: ```js { padding: "calc(var(--spacing) * 1)", paddingRight: "calc(var(--spacing) * 3)", paddingBottom: "calc(var(--spacing) * 4)" }; ``` produces the following styles:  and the following html: ```html <span style="padding-top: ; padding-right: calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 4); padding-left: ;">App</span> ``` even though the computed properties tab of the dev-tools appear to be correct and the padding is properly rendered in the screen:  If I remove the css-variable, everything works as expected. **React version**: From v15.0.0 to 16.12.0 _Note_: Below v15.0.0 the styles are correctly produced: ```html <span style="padding:calc(var(--spacing) * 1);padding-right:calc(var(--spacing) * 3);padding-bottom:calc(var(--spacing) * 4);">App</span> ``` ## Steps To Reproduce 1. Add a style object to a component that has both a property shorthand and a specific one (like `padding` and `paddingRight`) and uses a css variable (like `var(--spacing)`. 2. Render that component and inspect using dev-tools. Link to code example: https://codesandbox.io/s/heuristic-wood-bjr1y styles object: ```js { padding: "calc(var(--spacing) * 1)", paddingRight: "calc(var(--spacing) * 3)", paddingBottom: "calc(var(--spacing) * 4)" }; ``` ## The current behavior React does not produces the correct css inline styles when using css variables for both the shorthand property and another specific one: ```html <span style="padding-top: ; padding-right: calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 4); padding-left: ;">App</span> ``` ## The expe…