Add where rtl mixins

Author: rtivital

src/preset.ts

@@ -78,6 +78,30 @@ const notLtrMixin = {
   },
 };
 
+const rtlWhereMixin = {
+  ':where([dir="rtl"]) &': {
+    '@mixin-content': {},
+  },
+};
+
+const ltrWhereMixin = {
+  ':where([dir="ltr"]) &': {
+    '@mixin-content': {},
+  },
+};
+
+const notRtlWhereMixin = {
+  ':where([dir="ltr"]) &': {
+    '@mixin-content': {},
+  },
+};
+
+const notLtrWhereMixin = {
+  ':where([dir="ltr"]) &': {
+    '@mixin-content': {},
+  },
+};
+
 const smallerThanMixin = (_mixin: string, breakpoint: string) => ({
   [`@media (max-width: ${converters.em(converters.px(breakpoint) - 0.1)})`]: {
     '@mixin-content': {},
@@ -114,6 +138,10 @@ module.exports = () => {
           ltr: ltrMixin,
           'not-rtl': notRtlMixin,
           'not-ltr': notLtrMixin,
+          'where-rtl': rtlWhereMixin,
+          'where-ltr': ltrWhereMixin,
+          'where-not-rtl': notRtlWhereMixin,
+          'where-not-ltr': notLtrWhereMixin,
           'smaller-than': smallerThanMixin,
           'larger-than': largerThanMixin,
         },

src/tests/__snapshots__/mixin-rtl.test.ts.snap

@@ -10,3 +10,14 @@ exports[`mixin-rtl transforms rtl mixins correctly 1`] = `
 }
 "
 `;
+
+exports[`mixin-rtl transforms where-rtl mixins correctly 1`] = `
+"
+:where([dir="rtl"]) .demo {
+    margin-right: 1rem
+}
+  :where([dir="ltr"]) .demo {
+    margin-left: 1rem
+}
+"
+`;

src/tests/mixin-rtl.test.ts

@@ -12,9 +12,26 @@ const baseInput = `
 }
 `;
 
+const whereInput = `
+.demo {
+  @mixin where-rtl {
+    margin-right: 1rem;
+  }
+
+  @mixin where-not-rtl {
+    margin-left: 1rem;
+  }
+}
+`;
+
 describe('mixin-rtl', () => {
   it('transforms rtl mixins correctly', async () => {
     const res = await testTransform(baseInput);
     expect(res.css).toMatchSnapshot();
   });
+
+  it('transforms where-rtl mixins correctly', async () => {
+    const res = await testTransform(whereInput);
+    expect(res.css).toMatchSnapshot();
+  });
 });