Add where-hover mixin

mantinedev · Jan 1, 2024 · 1561949 · 1561949
1 parent 179c8c0
commit 1561949
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 0 deletions.
diff --git a/src/preset.ts b/src/preset.ts
@@ -54,6 +54,19 @@ const hoverMixin = {
   },
 };
 
+const hoverWhereMixin = {
+  '@media (hover: hover)': {
+    '&:where(:hover)': {
+      '@mixin-content': {},
+    },
+  },
+  '@media (hover: none)': {
+    '&:where(:active)': {
+      '@mixin-content': {},
+    },
+  },
+};
+
 const rtlMixin = {
   '[dir="rtl"] &': {
     '@mixin-content': {},
@@ -134,6 +147,7 @@ module.exports = () => {
           'where-light-root': rootColorSchemeMixin('light', 'where'),
           'where-dark-root': rootColorSchemeMixin('dark', 'where'),
           hover: hoverMixin,
+          'where-hover': hoverWhereMixin,
           rtl: rtlMixin,
           ltr: ltrMixin,
           'not-rtl': notRtlMixin,

diff --git a/src/tests/__snapshots__/mixin-hover.test.ts.snap b/src/tests/__snapshots__/mixin-hover.test.ts.snap
@@ -14,3 +14,18 @@ exports[`mixin-hover transforms hover mixin correctly 1`] = `
 }
 "
 `;
+
+exports[`mixin-hover transforms where-hover mixin correctly 1`] = `
+"
+@media (hover: hover) {
+    .demo:where(:hover) {
+    color: orange
+    }
+}
+  @media (hover: none) {
+    .demo:where(:active) {
+    color: orange
+    }
+}
+"
+`;
diff --git a/src/tests/mixin-hover.test.ts b/src/tests/mixin-hover.test.ts
@@ -8,9 +8,22 @@ const baseInput = `
 }
 `;
 
+const whereInput = `
+.demo {
+  @mixin where-hover {
+    color: orange;
+  }
+}
+`;
+
 describe('mixin-hover', () => {
   it('transforms hover mixin correctly', async () => {
     const res = await testTransform(baseInput);
     expect(res.css).toMatchSnapshot();
   });
+
+  it('transforms where-hover mixin correctly', async () => {
+    const res = await testTransform(whereInput);
+    expect(res.css).toMatchSnapshot();
+  });
 });