From 0413b84c12e44950b84b144fafaffb5266f371b8 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 23 Jun 2021 02:40:52 +0200
Subject: [PATCH] ensure `peer` variants don't include multiple ~ characters
 (#4757)

Fixes: #4726
---
 src/jit/corePlugins.js     |  7 ++-----
 tests/jit/variants.test.js | 26 ++++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/jit/corePlugins.js b/src/jit/corePlugins.js
index 9b2f28cf77a4..054d57f48561 100644
--- a/src/jit/corePlugins.js
+++ b/src/jit/corePlugins.js
@@ -201,11 +201,8 @@ export default {
             return null
           }
 
-          return applyPseudoToMarker(
-            variantSelector,
-            peerMarker,
-            state,
-            (marker, selector) => `${marker} ~ ${selector}`
+          return applyPseudoToMarker(variantSelector, peerMarker, state, (marker, selector) =>
+            selector.trim().startsWith('~') ? `${marker}${selector}` : `${marker} ~ ${selector}`
           )
         })
       )
diff --git a/tests/jit/variants.test.js b/tests/jit/variants.test.js
index 68a50cc2c1ca..52967a9f5b15 100644
--- a/tests/jit/variants.test.js
+++ b/tests/jit/variants.test.js
@@ -32,3 +32,29 @@ test('variants', () => {
     expect(result.css).toMatchFormattedCss(expected)
   })
 })
+
+test('stacked peer variants', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [{ raw: 'peer-disabled:peer-focus:peer-hover:border-blue-500' }],
+    corePlugins: { preflight: false },
+    theme: {},
+    plugins: [],
+  }
+
+  let css = `
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  let expected = `
+    .peer:disabled:focus:hover ~ .peer-disabled\\:peer-focus\\:peer-hover\\:border-blue-500 {
+      --tw-border-opacity: 1;
+      border-color: rgba(59, 130, 246, var(--tw-border-opacity));
+    }
+  `
+
+  let result = await run(css, config)
+  expect(result.css).toIncludeCss(expected)
+})