segmentio/ui-box

Support for multiple selectors in one key

brandongregoryscott opened this issue · 0 comments

After doing some work in Evergreen to port over existing usages of selectors w/ glamor to the new selectors prop, I noticed there's a few cases where multiple selectors are defined for a single style object, which isn't really something I tested/accounted for in the original implementation, i.e.

https://github.com/segmentio/evergreen/pull/1547/files#diff-f2f842965d1162aa3cdb5c77d3dea444fb856897460ae05978e783891aabd7cdL43-L45

const animationStyles = {
  '&[data-state="entering"], &[data-state="entered"]': {
    animation: `${openAnimation} ${ANIMATION_DURATION}ms ${animationEasing.spring} both`
  }
}

This simple case may "seem" to work in the current implementation (see Comma-separated selectors example), however without the classname prepended, this results in a lower specificity and leaked styles: Incorrect comma-separated selectors example