WIP

src/corePlugins.js

@@ -127,12 +127,7 @@ export let variantPlugins = {
 
       // Interactive
       'focus-within',
-      [
-        'hover',
-        !flagEnabled(config(), 'hoverOnlyWhenSupported')
-          ? '&:hover'
-          : '@media (hover: hover) and (pointer: fine) { &:hover }',
-      ],
+      ['hover', config('shittyHover') ? '&:hover' : '@media (hover: hover) { &:hover }'],
       'focus',
       'focus-visible',
       'active',
@@ -197,6 +192,11 @@ export let variantPlugins = {
     }
   },
 
+  // directionVariants: ({ addVariant }) => {
+  //   addVariant('ltr', ':is([dir="ltr"] &)')
+  //   addVariant('rtl', ':is([dir="rtl"] &)')
+  // },
+
   directionVariants: ({ addVariant }) => {
     addVariant('ltr', ':is([dir="ltr"] &)')
     addVariant('rtl', ':is([dir="rtl"] &)')

src/lib/setupContextUtils.js

@@ -719,6 +719,7 @@ function collectLayerPlugins(root) {
 }
 
 function resolvePlugins(context, root) {
+  console.log(Object.entries(variantPlugins))
   let corePluginList = Object.entries(corePlugins)
     .map(([name, plugin]) => {
       if (!context.tailwindConfig.corePlugins.includes(name)) {

tests/variants.test.js

@@ -756,11 +756,8 @@ it('variants only picks the used selectors in a group (apply)', () => {
   })
 })
 
-test('hoverOnlyWhenSupported adds hover and pointer media features by default', () => {
+test('hover includes hover media feature by default', () => {
   let config = {
-    future: {
-      hoverOnlyWhenSupported: true,
-    },
     content: [
       {
         raw: html`<div class="hover:underline group-hover:underline peer-hover:underline"></div>`,
@@ -778,7 +775,7 @@ test('hoverOnlyWhenSupported adds hover and pointer media features by default',
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       ${defaults}
-      @media (hover: hover) and (pointer: fine) {
+      @media (hover: hover) {
         .hover\:underline:hover,
         .group:hover .group-hover\:underline,
         .peer:hover ~ .peer-hover\:underline {
@@ -789,6 +786,62 @@ test('hoverOnlyWhenSupported adds hover and pointer media features by default',
   })
 })
 
+// Options:
+// - Boolean of some kind, negative connotation (legacyHover, classicHover)
+// - String-based option (hoverStrategy or something, 'classic/legacy', 'any', 'primary')
+//   - Maybe literally just "hover: 'primary'"
+//     - plain, legacy, classic, "all"?
+// - Boolean, factual/unbiased (hoverOnTouchDevices: true)
+
+// hover: 'all' | 'primary' | 'any' => config option
+// hover:underline => @media (hover: hover) and (pointer: fine) (based on 'primary' default)
+// hover/any:underline => @media (any-hover: hover) and (pointer: fine)
+// hover/primary:underline => @media (hover: hover) and (pointer: fine)
+// hover/all:underline => &:hover
+
+// legacyHover: true => config option
+// hover:underline => @media (hover: hover) and (pointer: fine)
+// hover/any:underline => @media (any-hover: hover) and (pointer: fine)
+// [&:hover]:underline
+
+test('legacy hover behavior using the config option', () => {
+  let config = {
+    hover: 'any',
+    content: [
+      {
+        raw: html`<div class="hover:underline group-hover:underline peer-hover:underline"></div>`,
+      },
+    ],
+    corePlugins: { preflight: false },
+    variants: {
+      hover: '&:hover',
+    },
+    plugins: [
+      // require('tailwindcss/hover-compat'),
+      // function ({ addVariant }) {
+      //   addVariant('hover', '&:hover')
+      // },
+    ],
+  }
+
+  let input = css`
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
+      .hover\:underline:hover,
+        .group:hover .group-hover\:underline,
+        .peer:hover ~ .peer-hover\:underline {
+        text-decoration-line: underline;
+      }
+    `)
+  })
+})
+
 test('multi-class utilities handle selector-mutating variants correctly', () => {
   let config = {
     content: [