search

segmentio / ui-box

Blazing Fast React UI Primitive
MIT License
1.07k stars 55 forks source link

Support for nested selectors #125

Closed brandongregoryscott closed 1 year ago

brandongregoryscott commented 1 year ago

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'
    }
  }
}