segmentio/ui-box

Support for nested selectors

brandongregoryscott opened this issue · 0 comments

Similar to #124, I've noticed a few instances in Evergreen that group nested selectors

https://github.com/segmentio/evergreen/blob/0c36c459c6964303d9877fc67b2a0c918c011170/src/themes/default/components/group.js#L2-L9

// _child is a friendly placeholder for consumer to override the actual selector value in the component, ie. _child: '& > *',
_child: {
  '&:focus': {
    zIndex: 'zIndices.focused'
  },
  '&:active': {
    zIndex: 'zIndices.focused'
  }
}

I think this would have to follow the same selectors key pattern, i.e.

_child: {
  selectors: {
    '&:focus': {
      zIndex: 'zIndices.focused'
    },
    '&:active': {
      zIndex: 'zIndices.focused'
    }
  }
}