Add [open] variant

[seanpdoyle]

The [open] pseudo-selector can be used to style an element that
declares the [open] attribute (like <details> or <dialog>).

For example:

<details class="border-0 open:border-1" open>
  <!-- ... -->
</details>

<details class="border-0 open:border-1">
  <!-- ... -->
</details>

The first <details> element is expanded, and so the open: variant
will be active (i.e. border-1), and the second element's will be
inactive (i.e. border-0).

[seanpdoyle]

@adamwathan in addition to styling the elements that declare [open] themselves (e.g. <details>), it'd be really valuable to also integrate the open: variant with the .group and .peer utilities.

For example:

<details class="group peer" open>
  <summary>
    <span class="hidden group-open:inline">Close me, I'm open</span>
    <span class="inline group-open:hidden">Open me, I'm closed</span>
  </summary>
</details>

<span class="hidden peer-open:inline">I'm next to an open element</span>
<span class="inline peer-open:hidden">I'm next to a closed element</span>

Since the booleanAttributeVariants key is new, I wasn't sure how to best integrate with the existing group and peer support from the pseudoElementVariants without copy-pasting. Is there an existing utility we could re-use, or would this require extracting a new one?

[MichaelAllenWarner]

Native [open] support would be great.

Not sure if this will be helpful, but I use a single custom variant to target both an open details and any of its descendants:

addVariant('open', ({ modifySelectors, separator }) => {
  return modifySelectors(({ selector }) => {
    return selectorParser(selectors => {
      const clonedSelectors = selectors.clone();
      selectors.walkClasses(classNode => {
        classNode.value = `open${separator}${classNode.value}`;
        classNode.parent.insertBefore(classNode, selectorParser().astSync('[open]'));
      });
      clonedSelectors.walkClasses(classNode => {
        classNode.value = `open${separator}${classNode.value}`;
        classNode.parent.insertBefore(classNode, selectorParser().astSync('[open] '));
      });
      selectors.append(clonedSelectors);
    }).processSync(selector);
  });
});

In my experience it works well, including in combination with other variants (I'm using JIT), though I guess having a single variant for both purposes could be a problem if you have nested details elements.

[reinink]

@seanpdoyle Thanks for this contribution! A lot has changed to the Tailwind CSS codebase since you originally submitted this, so instead of refactoring this PR, I just created a new one (#5627) and marked you as a co-author. I also got the group and peer versions working. 👍

Thanks again! 🙌