From e6d5accd89850bcaac9b84d8481c6234580313b1 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Sat, 9 Dec 2023 09:26:43 -0500
Subject: [PATCH] Port child variant

---
 src/corePlugins.js           |  3 +++
 src/lib/setupContextUtils.js |  1 +
 tests/variants.test.js       | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 37 insertions(+)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 76443f554..a0687ab67 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -25,6 +25,9 @@ import { normalize } from './util/dataTypes'
 import { INTERNAL_FEATURES } from './lib/setupContextUtils'
 
 export let variantPlugins = {
+  childVariant: ({ addVariant }) => {
+    addVariant('*', '& > *')
+  },
   pseudoElementVariants: ({ addVariant }) => {
     addVariant('first-letter', '&::first-letter')
     addVariant('first-line', '&::first-line')
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index 28991dc83..d47620218 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -756,6 +756,7 @@ function resolvePlugins(context, root) {
   // TODO: This is a workaround for backwards compatibility, since custom variants
   // were historically sorted before screen/stackable variants.
   let beforeVariants = [
+    variantPlugins['childVariant'],
     variantPlugins['pseudoElementVariants'],
     variantPlugins['pseudoClassVariants'],
     variantPlugins['hasVariants'],
diff --git a/tests/variants.test.js b/tests/variants.test.js
index 55facc122..e54b37720 100644
--- a/tests/variants.test.js
+++ b/tests/variants.test.js
@@ -1202,3 +1202,36 @@ crosscheck(({ stable, oxide }) => {
     `)
   })
 })
+
+test('* is matched by the parser as the children variant', async () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div class="*:italic" />
+          <div class="*:hover:italic" />
+          <div class="hover:*:italic" />
+          <div class="data-[slot=label]:*:hover:italic" />
+          <div class="[&_p]:*:hover:italic" />
+        `,
+      },
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  let result = await run(input, config)
+
+  expect(result.css).toMatchFormattedCss(css`
+    .\*\:italic > *,
+    .\*\:hover\:italic:hover > *,
+    .hover\:\*\:italic > :hover,
+    .data-\[slot\=label\]\:\*\:hover\:italic:hover > [data-slot='label'],
+    .\[\&_p\]\:\*\:hover\:italic:hover > * p {
+      font-style: italic;
+    }
+  `)
+})