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) +})