tailwindcss-react-aria-components 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-react-aria-components",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "A Tailwind plugin that adds variants for data attributes in React Aria Components",
   "license": "Apache-2.0",
   "repository": {
@@ -26,5 +26,5 @@
   "peerDependencies": {
     "tailwindcss": "^4.0.0"
   },
-  "gitHead": "3577a20859b9585a000010c720f6ee39c1c588cc"
+  "gitHead": "1c84a49a1faf50b571c84e00bcf9c60b22ddd03e"
 }

package/src/index.js

@@ -94,40 +94,32 @@ let getSelector = (prefix, attributeName, attributeValue) => {
     : `[data-${attributeName}]`;
   let nativeSelector = nativeVariantSelectors.get(attributeName);
   if (prefix === '' && nativeSelector) {
-    let wrappedNativeSelector = `&:where(:not([data-rac]))${nativeSelector}`;
-    let nativeSelectorGenerator = wrappedNativeSelector;
+    // Collapse the RAC and native branches into a single `:is()` so `not-*`
+    // works — Tailwind's `not` walker bails on a dual-selector (array) shape.
+    // `:where()` keeps specificity at (0,1,0).
+    let unifiedSelector = `&:is(:where([data-rac])${baseSelector}, :where(:not([data-rac]))${nativeSelector})`;
+    // Hover needs `@media (hover: hover)` to avoid sticky styles on touch.
+    // Emitted as CSS-in-JS (not `@media ... { & }`) so Tailwind reports
+    // compounds as `StyleRules | AtRules`, keeping `group-hover:`/`peer-hover:`
+    // composable while still letting `not-hover:` invert cleanly.
     if (nativeSelector === ':hover') {
-      nativeSelectorGenerator = wrap => `@media (hover: hover) { ${wrap(wrappedNativeSelector)} }`;
+      return {
+        '@media (hover: hover)': {
+          [unifiedSelector]: '@slot'
+        }
+      };
     }
-    return [`&:where([data-rac])${baseSelector}`, nativeSelectorGenerator];
+    return unifiedSelector;
   } else if (prefix === '' && nativeMergeSelectors.has(attributeName)) {
-    return [`&${baseSelector}`, `&${nativeMergeSelectors.get(attributeName)}`];
+    // Same `:is()` collapse for merge selectors (e.g. placeholder).
+    return `&:is(${baseSelector}, ${nativeMergeSelectors.get(attributeName)})`;
   } else {
     return `&${baseSelector}`;
   }
 };
 
-let mapSelector = (selector, fn) => {
-  if (Array.isArray(selector)) {
-    return selector.map(fn);
-  } else {
-    return fn(selector);
-  }
-};
-
-let wrapSelector = (selector, wrap) => {
-  if (typeof selector === 'function') {
-    return selector(wrap);
-  } else {
-    return wrap(selector);
-  }
-};
-
 let addVariants = (variantName, selectors, addVariant) => {
-  addVariant(
-    variantName,
-    mapSelector(selectors, selector => wrapSelector(selector, s => s))
-  );
+  addVariant(variantName, selectors);
 };
 
 module.exports = plugin.withOptions(options => ({addVariant}) => {