Skip to content

Add support for nested selector composition #128

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Merged
merged 5 commits into from
Nov 29, 2022
Merged

Add support for nested selector composition #128

merged 5 commits into from
Nov 29, 2022

Conversation

brandongregoryscott
Copy link
Contributor

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",
        },
      },
    },
  }}
/>

@brandongregoryscott brandongregoryscott merged commit 8415ad0 into segmentio:master Nov 29, 2022
@brandongregoryscott brandongregoryscott deleted the support-nested-selectors branch November 29, 2022 15:09
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support for nested selectors
2 participants