segmentio / ui-box

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

Expand comma separated selectors to maintain specificity #129

Closed brandongregoryscott closed 1 year ago

brandongregoryscott commented 1 year ago

Resolves #124

One thing to note about this implementation is the lack of any sanitization/trimming of each "part" of the selector. This means the whitespace that is before a selector will be maintained - [data-foo] is not the same as [data-foo]. I originally implemented it in a way that would trim each part, but that approach seemed a little too opinionated (and isn't what glamor does anyway). So the example in the issue should actually be slightly tweaked to have the space removed for the intended effect:

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