Respect Tailwind hoverOnlyWhenSupported, and fix placeholder-shown with Input (#5587)

Author: devongovett

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

@@ -66,15 +66,27 @@ const nativeVariantSelectors = new Map([
   ['hovered', ':hover'],
   ['focused', ':focus'],
   ['readonly', ':read-only'],
-  ['open', '[open]'],
+  ['open', '[open]']
+]);
+
+// Variants where both native and RAC attributes should apply. We don't override these.
+const nativeMergeSelectors = new Map([
   ['placeholder', ':placeholder-shown']
 ]);
 
 // If no prefix is specified, we want to avoid overriding native variants on non-RAC components, so we only target elements with the data-rac attribute for those variants.
-let getSelector = (prefix, attributeName, attributeValue) => {
+let getSelector = (prefix, attributeName, attributeValue, hoverOnlyWhenSupported) => {
   let baseSelector = attributeValue ? `[data-${attributeName}="${attributeValue}"]` : `[data-${attributeName}]`;
-  if (prefix === '' && nativeVariantSelectors.has(attributeName)) {
-    return [`&:where([data-rac])${baseSelector}`, `&:where(:not([data-rac]))${nativeVariantSelectors.get(attributeName)}`];
+  let nativeSelector = nativeVariantSelectors.get(attributeName);
+  if (prefix === '' && nativeSelector) {
+    let wrappedNativeSelector = `&:where(:not([data-rac]))${nativeSelector}`;
+    let nativeSelectorGenerator = wrappedNativeSelector;
+    if (nativeSelector === ':hover' && hoverOnlyWhenSupported) {
+      nativeSelectorGenerator = wrap => `@media (hover: hover) and (pointer: fine) { ${wrap(wrappedNativeSelector)} }`;
+    }
+    return [`&:where([data-rac])${baseSelector}`, nativeSelectorGenerator];
+  } else if (prefix === '' && nativeMergeSelectors.has(attributeName)) {
+    return [`&${baseSelector}`, `&${nativeMergeSelectors.get(attributeName)}`];
   } else {
     return `&${baseSelector}`;
   }
@@ -88,36 +100,46 @@ let mapSelector = (selector, fn) => {
   }
 };
 
+let wrapSelector = (selector, wrap) => {
+  if (typeof selector === 'function') {
+    return selector(wrap);
+  } else {
+    return wrap(selector);
+  }
+};
+
 let addVariants = (variantName, selectors, addVariant, matchVariant) => {
-  addVariant(variantName, selectors);
+  addVariant(variantName, mapSelector(selectors, selector => wrapSelector(selector, s => s)));
   matchVariant(
     'group',
     (_, {modifier}) =>
       modifier
-        ? mapSelector(selectors, selector => `:merge(.group\\/${modifier})${selector.slice(1)} &`)
-        : mapSelector(selectors, selector => `:merge(.group)${selector.slice(1)} &`),
+        ? mapSelector(selectors, selector => wrapSelector(selector, s => `:merge(.group\\/${modifier})${s.slice(1)} &`))
+        : mapSelector(selectors, selector => wrapSelector(selector, s => `:merge(.group)${s.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)} ~ &`),
+        ? mapSelector(selectors, selector => wrapSelector(selector, s => `:merge(.peer\\/${modifier})${s.slice(1)} ~ &`))
+        : mapSelector(selectors, selector => wrapSelector(selector, s => `:merge(.peer)${s.slice(1)} ~ &`)),
     {values: {[variantName]: variantName}}
   );
 };
 
-module.exports = plugin.withOptions((options) => (({addVariant, matchVariant}) => {
+module.exports = plugin.withOptions((options) => (({addVariant, matchVariant, config}) => {
   let prefix = options?.prefix ? `${options.prefix}-` : '';
+  let future = config().future;
+  let hoverOnlyWhenSupported = future === 'all' || future?.hoverOnlyWhenSupported;
 
   // Enum attributes go first because currently they are all non-interactive states.
   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);
+        let selectors = getSelector(prefix, attributeName, attributeValue, hoverOnlyWhenSupported);
         addVariants(variantName, selectors, addVariant, matchVariant);
       }
     );
@@ -127,7 +149,7 @@ module.exports = plugin.withOptions((options) => (({addVariant, matchVariant}) =
     let variantName = Array.isArray(attribute) ? attribute[0] : attribute;
     variantName = `${prefix}${variantName}`;
     let attributeName = Array.isArray(attribute) ? attribute[1] : attribute;
-    let selectors = getSelector(prefix, attributeName);
+    let selectors = getSelector(prefix, attributeName, null, hoverOnlyWhenSupported);
     addVariants(variantName, selectors, addVariant, matchVariant);
   });
 }));

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

@@ -5,13 +5,14 @@ const postcss = require('postcss');
 let html = String.raw;
 let css = String.raw;
 
-function run({options, content}) {
+function run({options, content, future = {}}) {
   let {currentTestName} = expect.getState();
   let config = {
     plugins: [require('./index.js')(options)],
     corePlugins: {preflight: false},
     theme: {colors: {red: 'red'}},
-    content: [{raw: content}]
+    content: [{raw: content}],
+    future
   };
 
   return postcss(tailwind(config)).process(
@@ -138,11 +139,11 @@ test('variants', async () => {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
 }
-.placeholder-shown\:bg-red:where([data-rac])[data-placeholder] {
+.placeholder-shown\:bg-red[data-placeholder] {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
 }
-.placeholder-shown\:bg-red:where(:not([data-rac])):placeholder-shown {
+.placeholder-shown\:bg-red:placeholder-shown {
     --tw-bg-opacity: 1;
     background-color: rgb(255 0 0 / var(--tw-bg-opacity))
 }
@@ -505,3 +506,20 @@ test('variants with prefix', async () => {
     );
   });
 });
+
+test('hoverOnlyWhenSupported', () => {
+  let content = html`<div data-rac className="hover:bg-red"></div>`;
+  return run({content, future: {hoverOnlyWhenSupported: true}}).then((result) => {
+    expect(result.css).toContain(css`
+.hover\:bg-red:where([data-rac])[data-hovered] {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+}
+@media (hover: hover) and (pointer: fine) {
+    .hover\:bg-red:where(:not([data-rac])):hover {
+        --tw-bg-opacity: 1;
+        background-color: rgb(255 0 0 / var(--tw-bg-opacity))
+    }
+}`);
+  });
+});