Theme-ui: Make order of variant prop irrelevant

[cour64]

Say I have the variant for buttons defined as follows:

buttons: {
  primary: {
    bg: 'primary'
  }
}

Currently the order of the props matters. e.g.

sx={{
  variant: 'buttons.primary',
  bg: 'secondary'
}}

Will correctly overwrite the color set with the bg prop to secondary but

sx={{
  bg: 'secondary',
  variant: 'buttons.primary'
}}

will not. The bg prop set in the button.primary variant will overwrite the bg prop set specifically on the sx prop.

I'm not sure if there is any use for this overwriting behaviour, but it makes sense to me that styles defined specifically should overwrite the styles defined in variant regardless of the order they are set.

A potential solution is to perhaps swap the order of styles when they are spread in the @theme-ui/css package so from:

https://github.com/system-ui/theme-ui/blob/cf5b00ad01a59b215b1ff6ef0cbbbf9893025a9e/packages/css/src/index.ts#L212-L216

to

if (key === 'variant') {
  const variant = css(get(theme, val))(theme)
  result = { ...variant, ...result }
  continue
}

Not sure if this will work exhaustively, but it does pass all the tests in my fork

[jonavila]

I think this is another instance that would be solved by #174. You would just compose your styles with an array and you have control of the order. Last item in the array overwrites the previous.

[jxnblk]

This is intentional behavior, and there are a few use-cases for this. E.g. if you want to use a variant, but override one specific property on the element or including default styles on an element but allowing them to be overridden by a theme-based variant. Hope that makes sense!