segmentio / ui-box

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

Support for multiple selectors in one key #124

Closed brandongregoryscott closed 1 year ago

brandongregoryscott commented 1 year ago

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