Merge branch 'main' of github.com:adobe/react-spectrum

Author: devongovett

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

@@ -70,26 +70,34 @@ let getSelector = (prefix, attributeName, attributeValue) => {
   }
 };
 
+let mapSelector = (selector, fn) => {
+  if (Array.isArray(selector)) {
+    return selector.map(fn);
+  } else {
+    return fn(selector);
+  }
+};
+
 module.exports = plugin.withOptions((options) => (({addVariant}) => {
   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 selector = getSelector(prefix, attributeName);
-    addVariant(variantName, selector);
-    addVariant(`group-${variantName}`, `:merge(.group)${selector.slice(1)} &`);
-    addVariant(`peer-${variantName}`, `:merge(.peer)${selector.slice(1)} ~ &`);
+    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)} ~ &`));
   });
   Object.keys(attributes.enum).forEach((attributeName) => {
     attributes.enum[attributeName].forEach(
         (attributeValue) => {
           let name = shortNames[attributeName] || attributeName;
           let variantName = `${prefix}${name}-${attributeValue}`;
-          let selector = getSelector(prefix, attributeName, attributeValue);
-          addVariant(variantName, selector);
-          addVariant(`group-${variantName}`, `:merge(.group)${selector.slice(1)} &`);
-          addVariant(`peer-${variantName}`, `:merge(.peer)${selector.slice(1)} ~ &`);
+          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)} ~ &`));
         }
       );
   });

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"></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"></div>`;
   return run({content}).then((result) => {
     expect(result.css).toContain(css`
 .hover\:bg-red:where([data-rac])[data-hovered] {
@@ -34,6 +34,14 @@ test('variants', async () => {
     --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:where(:not([data-rac])):hover .group-hover\:bg-red {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+}
 .focus\:bg-red:where([data-rac])[data-focused] {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))