Predictable shorthand and longhand properties

[Rowno]

Currently if you have this:

function Component1(props) {
  return <Box borderRadius='3px' {...props} />
}

function Component2(props) {
  return <Box borderRadius='4px' {...props} />
}

function Root() {
  return (
    <div>
      <Component1 borderTopLeftRadius='0px' />
      <Component2 borderTopLeftRadius='0px' />
    </div>
  )
}

Component2 will still render a border-top-left-radius of 4px because the generated CSS rules look like this:

.borderRadius3px {
  border-radius: 3px;
}

.borderTopLeftRadius0px {
  border-top-left-radius: 0px;
}

.borderRadius4px {
  border-radius: 4px;
}

Which causes .borderTopLeftRadius0px to be overridden.

[Rowno]

This is now mostly fixed, but there are still some edge cases with the border properties. padding, margin, border-radius and overflow can now always be overridden though.