Arbitrary groups

[Viraj-10]

Hey,

Currently group feature is only supported with active, hover and focus selector.
Need support for Arbitrary groups like tailwind.

Use Case:-

<Pressable className={"group/checkbox p-4 bg-fuchsia-700 checked"}>
  <Text className="group-[.checked]/checkbox:text-fuchsia-100">Check Text</Text>
</Pressable>

Current Behaviour

Web

Native

PS:- I will be happy to raise a PR for this feature. @marklawlor

[marklawlor]

This probably won't happen until the library has matured a bit. There's still a couple of unanswered questions about its implementation. Hopefully I can explain this properly 🤔

<ImageBackground className="" imageClassName="group/background bg-blend-multiply">
  <Text className="group-[.bg-blend-multiply]/background:text-fuchsia-100">Check Text</Text>
</Pressable>

ImageBackground has 2 className props. Does Text see both? Do selectors "merge" the two props together, or does it simply care that one of the props matches the selector?

What if we had this code <ImageBackground className="group/background" imageClassName=" bg-blend-multiply">?

I'm avoiding selectors because I don't want to make a decision on this without thinking it through. I'm allowing pseudo-class selectors because they target the component's state which is shared between all props.

Before I tackle these ideas, I first need to finalise how CSS variables work across multiple props (do inline variables in one prop affect other prop, how to children inherit from multiple props?), and from there selectors will follow a similar logic.

[Viraj-10]

ohh, I was unaware of that there can multiple className props.
no worries but it's good to know it's in consideration. I will try to help with other problems.
Great Work !!