ensure peer variants don't include multiple ~ characters (#4757)

Fixes: #4726
tailwindlabs · Jun 23, 2021 · 0413b84 · 0413b84
1 parent b7b2db2
commit 0413b84
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git 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
@@ -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)
+})