From e4482c7596880093950f6e112c419704fc233e42 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Tue, 21 Mar 2023 15:31:41 +0100
Subject: [PATCH] ensure stacking `dark` and `rtl` variants with pseudo
 elements works as expected

---
 tests/variants.test.js | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/tests/variants.test.js b/tests/variants.test.js
index b17e669f7..da62419d4 100644
--- a/tests/variants.test.js
+++ b/tests/variants.test.js
@@ -1134,7 +1134,7 @@ crosscheck(({ stable, oxide }) => {
       darkMode: 'class',
       content: [
         {
-          raw: html` <div class="dark:rtl:italic" /> `,
+          raw: html`<div class="dark:rtl:italic" />`,
         },
       ],
       corePlugins: { preflight: false },
@@ -1152,4 +1152,28 @@ crosscheck(({ stable, oxide }) => {
       }
     `)
   })
+
+  test('stacking dark and rtl variants with pseudo elements', async () => {
+    let config = {
+      darkMode: 'class',
+      content: [
+        {
+          raw: html`<div class="dark:rtl:placeholder:italic" />`,
+        },
+      ],
+      corePlugins: { preflight: false },
+    }
+
+    let input = css`
+      @tailwind utilities;
+    `
+
+    let result = await run(input, config)
+
+    expect(result.css).toMatchFormattedCss(css`
+      :is(.dark :is([dir='rtl'] .dark\:rtl\:placeholder\:italic))::placeholder {
+        font-style: italic;
+      }
+    `)
+  })
 })