Support peer and group with custom variants

[TastyPi]

It seems the peer and group modifiers don't work with custom variants (unless I'm missing something?).

For example, it would be nice to be able to do this:

addVariant('expanded', '&[aria-expanded="true"]')

<button aria-expanded="false">Expand</button>
<div class="hidden peer-expanded:block">Hello World</div

but that does not currently seem possible without defining peer-expanded manually.

[adamwathan]

Yeah have to define manually, we define all the built-in ones manually too. Agree would be cool to figure out a way to make it a bit more automatic if possible.

[sntran]

From the sources, looks like you can add another variant for peer and group:

addVariant("group-expanded", `:merge(.group)[aria-expanded="true"] &`)
addVariant("peer-expanded", `:merge(.peer)[aria-expanded="true"] ~ &`);

It's not automagically, but it's only 2 more lines to add to your plugin.

[TastyPi]

@sntran yup, and I have done that, but only after an hour of trying to figure out why it wasn't working 🙂

[sergio-agosti]

@adamwathan @TastyPi I always add a small utility function to do that in one go:

const addVariantWithStates = (variant, selector) => {
    addVariant(variant, `&${selector}`)
    addVariant(`group-${variant}`, `:merge(.group)${selector} &`)
    addVariant(`peer-${variant}`, `:merge(.peer)${selector} ~ &`)
}

[sergio-agosti]

Usage example:

addVariantWithStates('expanded', '[aria-expanded="true"]')