Add support for named groups and peers in Tailwind plugin (#5178)

* Fix Tailwind plugin group variant regression

* lint

* add support for named groups to tailwind plugin

* add to example app

* cleanup

* fix example

* add support for named peers

---------

Co-authored-by: Devon Govett <devongovett@gmail.com>

Author: reidbarber

examples/rac-spectrum-tailwind/src/App.js

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { defaultTheme, Provider } from "@adobe/react-spectrum";
-import { Label, Radio, RadioGroup } from "react-aria-components";
+import { Label, Radio, RadioGroup, Button } from "react-aria-components";
 import User from "@spectrum-icons/workflow/User";
 import UserGroup from "@spectrum-icons/workflow/UserGroup";
 import Building from "@spectrum-icons/workflow/Building";
@@ -23,6 +23,15 @@ export function App() {
             <p>For the purpose of ensuring Tailwind's default selectors still work for non-RAC elements when using the plugin.</p>
           </div>
         </div>
+        <div className="flex justify-center">
+          <div className="flex flex-col">
+            <Button className="flex flex-col justify-center bg-white dark:bg-black border rounded group/button p-160 m-160 focus:outline-none focus-visible:ring">
+              <div className="w-full">Test Button</div>
+              <div className="w-full invisible group-hover/button:visible">Group is hovered</div>
+            </Button>
+            <p>For the purpose of testing named groups.</p>
+          </div>
+        </div>
       </div>
     </Provider>
   );

packages/tailwindcss-react-aria-components/src/index.js

@@ -78,26 +78,42 @@ let mapSelector = (selector, fn) => {
   }
 };
 
-module.exports = plugin.withOptions((options) => (({addVariant}) => {
+let addVariants = (variantName, selectors, addVariant, matchVariant) => {
+  addVariant(variantName, selectors);
+  matchVariant(
+    'group',
+    (_, {modifier}) =>
+      modifier
+        ? mapSelector(selectors, selector => `:merge(.group\\/${modifier})${selector.slice(1)} &`)
+        : mapSelector(selectors, selector => `:merge(.group)${selector.slice(1)} &`),
+    {values: {[variantName]: variantName}}
+  );
+  matchVariant(
+    'peer',
+    (_, {modifier}) =>
+      modifier
+        ? mapSelector(selectors, selector => `:merge(.peer\\/${modifier})${selector.slice(1)} ~ &`)
+        : mapSelector(selectors, selector => `:merge(.peer)${selector.slice(1)} ~ &`),
+    {values: {[variantName]: variantName}}
+  );
+};
+
+module.exports = plugin.withOptions((options) => (({addVariant, matchVariant}) => {
   let prefix = options?.prefix ? `${options.prefix}-` : '';
   attributes.boolean.forEach((attribute) => {
     let variantName = Array.isArray(attribute) ? attribute[0] : attribute;
     variantName = `${prefix}${variantName}`;
     let attributeName = Array.isArray(attribute) ? attribute[1] : attribute;
     let selectors = getSelector(prefix, attributeName);
-    addVariant(variantName, selectors);
-    addVariant(`group-${variantName}`, mapSelector(selectors, selector => `:merge(.group)${selector.slice(1)} &`));
-    addVariant(`peer-${variantName}`, mapSelector(selectors, selector => `:merge(.peer)${selector.slice(1)} ~ &`));
+    addVariants(variantName, selectors, addVariant, matchVariant);
   });
   Object.keys(attributes.enum).forEach((attributeName) => {
     attributes.enum[attributeName].forEach(
         (attributeValue) => {
           let name = shortNames[attributeName] || attributeName;
           let variantName = `${prefix}${name}-${attributeValue}`;
           let selectors = getSelector(prefix, attributeName, attributeValue);
-          addVariant(variantName, selectors);
-          addVariant(`group-${variantName}`, mapSelector(selectors, selector => `:merge(.group)${selector.slice(1)} &`));
-          addVariant(`peer-${variantName}`, mapSelector(selectors, selector => `:merge(.peer)${selector.slice(1)} ~ &`));
+          addVariants(variantName, selectors, addVariant, matchVariant);
         }
       );
   });

packages/tailwindcss-react-aria-components/src/index.test.js

@@ -23,7 +23,7 @@ function run({options, content}) {
 }
 
 test('variants', async () => {
-  let content = html`<div data-rac className="hover:bg-red focus:bg-red focus-visible:bg-red focus-within:bg-red pressed:bg-red disabled:bg-red drop-target:bg-red dragging:bg-red empty:bg-red allows-dragging:bg-red allows-removing:bg-red allows-sorting:bg-red placeholder-shown:bg-red selected:bg-red indeterminate:bg-red read-only:bg-red required:bg-red entering:bg-red exiting:bg-red open:bg-red unavailable:bg-red outside-month:bg-red outside-visible-range:bg-red selection-start:bg-red selection-end:bg-red current:bg-red invalid:bg-red resizing:bg-red placement-left:bg-red placement-right:bg-red placement-top:bg-red placement-bottom:bg-red type-literal:bg-red type-year:bg-red type-month:bg-red type-day:bg-red layout-grid:bg-red layout-stack:bg-red orientation-horizontal:bg-red orientation-vertical:bg-red selection-single:bg-red selection-multiple:bg-red resizable-right:bg-red resizable-left:bg-red resizable-both:bg-red sort-ascending:bg-red sort-descending:bg-red group-pressed:bg-red peer-pressed:bg-red group-hover:bg-red"></div>`;
+  let content = html`<div data-rac className="hover:bg-red focus:bg-red focus-visible:bg-red focus-within:bg-red pressed:bg-red disabled:bg-red drop-target:bg-red dragging:bg-red empty:bg-red allows-dragging:bg-red allows-removing:bg-red allows-sorting:bg-red placeholder-shown:bg-red selected:bg-red indeterminate:bg-red read-only:bg-red required:bg-red entering:bg-red exiting:bg-red open:bg-red unavailable:bg-red outside-month:bg-red outside-visible-range:bg-red selection-start:bg-red selection-end:bg-red current:bg-red invalid:bg-red resizing:bg-red placement-left:bg-red placement-right:bg-red placement-top:bg-red placement-bottom:bg-red type-literal:bg-red type-year:bg-red type-month:bg-red type-day:bg-red layout-grid:bg-red layout-stack:bg-red orientation-horizontal:bg-red orientation-vertical:bg-red selection-single:bg-red selection-multiple:bg-red resizable-right:bg-red resizable-left:bg-red resizable-both:bg-red sort-ascending:bg-red sort-descending:bg-red group-pressed:bg-red peer-pressed:bg-red group-hover:bg-red group/custom-name group-hover/custom-name:bg-red peer-pressed/custom-name:bg-red"></div>`;
   return run({content}).then((result) => {
     expect(result.css).toContain(css`
 .hover\:bg-red:where([data-rac])[data-hovered] {
@@ -34,10 +34,18 @@ test('variants', async () => {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
 }
+.group\/custom-name:where([data-rac])[data-hovered] .group-hover\/custom-name\:bg-red {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+}
 .group:where([data-rac])[data-hovered] .group-hover\:bg-red {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
 }
+.group\/custom-name:where(:not([data-rac])):hover .group-hover\/custom-name\:bg-red {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+}
 .group:where(:not([data-rac])):hover .group-hover\:bg-red {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
@@ -74,6 +82,10 @@ test('variants', async () => {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
 }
+.peer\/custom-name[data-pressed] ~ .peer-pressed\/custom-name\:bg-red {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+}
 .peer[data-pressed] ~ .peer-pressed\:bg-red {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
@@ -283,13 +295,17 @@ test('variants', async () => {
 });
 
 test('variants with prefix', async () => {
-  let content = html`<div data-rac className="rac-hover:bg-red rac-focus:bg-red rac-focus-visible:bg-red rac-focus-within:bg-red rac-pressed:bg-red rac-disabled:bg-red rac-drop-target:bg-red rac-dragging:bg-red rac-empty:bg-red rac-allows-dragging:bg-red rac-allows-removing:bg-red rac-allows-sorting:bg-red rac-placeholder-shown:bg-red rac-selected:bg-red rac-indeterminate:bg-red rac-read-only:bg-red rac-required:bg-red rac-entering:bg-red rac-exiting:bg-red rac-open:bg-red rac-unavailable:bg-red rac-outside-month:bg-red rac-outside-visible-range:bg-red rac-selection-start:bg-red rac-selection-end:bg-red rac-current:bg-red rac-invalid:bg-red rac-resizing:bg-red rac-placement-left:bg-red rac-placement-right:bg-red rac-placement-top:bg-red rac-placement-bottom:bg-red rac-type-literal:bg-red rac-type-year:bg-red rac-type-month:bg-red rac-type-day:bg-red rac-layout-grid:bg-red rac-layout-stack:bg-red rac-orientation-horizontal:bg-red rac-orientation-vertical:bg-red rac-selection-single:bg-red rac-selection-multiple:bg-red rac-resizable-right:bg-red rac-resizable-left:bg-red rac-resizable-both:bg-red rac-sort-ascending:bg-red rac-sort-descending:bg-red group-rac-pressed:bg-red peer-rac-pressed:bg-red"></div>`;
+  let content = html`<div data-rac className="rac-hover:bg-red rac-focus:bg-red rac-focus-visible:bg-red rac-focus-within:bg-red rac-pressed:bg-red rac-disabled:bg-red rac-drop-target:bg-red rac-dragging:bg-red rac-empty:bg-red rac-allows-dragging:bg-red rac-allows-removing:bg-red rac-allows-sorting:bg-red rac-placeholder-shown:bg-red rac-selected:bg-red rac-indeterminate:bg-red rac-read-only:bg-red rac-required:bg-red rac-entering:bg-red rac-exiting:bg-red rac-open:bg-red rac-unavailable:bg-red rac-outside-month:bg-red rac-outside-visible-range:bg-red rac-selection-start:bg-red rac-selection-end:bg-red rac-current:bg-red rac-invalid:bg-red rac-resizing:bg-red rac-placement-left:bg-red rac-placement-right:bg-red rac-placement-top:bg-red rac-placement-bottom:bg-red rac-type-literal:bg-red rac-type-year:bg-red rac-type-month:bg-red rac-type-day:bg-red rac-layout-grid:bg-red rac-layout-stack:bg-red rac-orientation-horizontal:bg-red rac-orientation-vertical:bg-red rac-selection-single:bg-red rac-selection-multiple:bg-red rac-resizable-right:bg-red rac-resizable-left:bg-red rac-resizable-both:bg-red rac-sort-ascending:bg-red rac-sort-descending:bg-red group-rac-pressed:bg-red group/custom-name group-rac-hover/custom-name:bg-red peer-rac-pressed:bg-red peer-rac-pressed/custom-name:bg-red"></div>`;
   return run({content, options: {prefix: 'rac'}}).then((result) => {
     expect(result.css).toContain(css`
 .rac-hover\:bg-red[data-hovered] {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
 }
+.group\/custom-name[data-hovered] .group-rac-hover\/custom-name\:bg-red {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+}
 .rac-focus\:bg-red[data-focused] {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
@@ -310,6 +326,10 @@ test('variants with prefix', async () => {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
 }
+.peer\/custom-name[data-pressed] ~ .peer-rac-pressed\/custom-name\:bg-red {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+}
 .peer[data-pressed] ~ .peer-rac-pressed\:bg-red {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))