segmentio / ui-box

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

Add support for nested selector composition #128

Closed brandongregoryscott closed 1 year ago

brandongregoryscott commented 1 year ago

Resolves #125

The logic in enhanceProps already more or less supported this, but the typing of EnhancerProps['selectors'] did not allow you to pass anything but keys from CssProps. The SelectorMap type is recursive and allows you to nest selectors based on the parent with or without the selectors key!

For example, these are all equivalent:

<Box
  data-active={true}
  height={100}
  width={200}
  selectors={{
    "[data-active=true]": {
      backgroundColor: "blue",
    },
    "[data-active=true]:hover": {
      backgroundColor: "red",
    },
  }}
/>

<Box
  data-active={true}
  height={100}
  width={200}
  selectors={{
    "[data-active=true]": {
      backgroundColor: "blue",
      "&:hover": {
        backgroundColor: "red",
      },
    },
  }}
/>

<Box
  data-active={true}
  height={100}
  width={200}
  selectors={{
    "[data-active=true]": {
      backgroundColor: "blue",
      selectors: {
        "&:hover": {
          backgroundColor: "red",
        },
      },
    },
  }}
/>