From 61523cde59f26738c0fa1fa3d44ae54a599e6c72 Mon Sep 17 00:00:00 2001
From: Gregor Kaczmarczyk <github@aggreggator.de>
Date: Sun, 14 Nov 2021 18:27:30 +0100
Subject: [PATCH] Add children variant

---
 src/corePlugins.js           |  4 ++++
 src/lib/setupContextUtils.js |  1 +
 tests/variants.test.css      | 18 ++++++++++++++++++
 tests/variants.test.html     |  7 +++++++
 4 files changed, 30 insertions(+)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 5309475ce4ca..85d2493c1fb3 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -109,6 +109,10 @@ export let variantPlugins = {
     }
   },
 
+  childrenVariant: ({ addVariant }) => {
+    addVariant('children', '& > *')
+  },
+
   directionVariants: ({ addVariant }) => {
     addVariant('ltr', () => {
       log.warn('rtl-experimental', [
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index 2701adb9a3a2..f89b76e37408 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -570,6 +570,7 @@ function resolvePlugins(context, root) {
     variantPlugins['pseudoClassVariants'],
   ]
   let afterVariants = [
+    variantPlugins['childrenVariant'],
     variantPlugins['directionVariants'],
     variantPlugins['reducedMotionVariants'],
     variantPlugins['darkVariants'],
diff --git a/tests/variants.test.css b/tests/variants.test.css
index f1c9b0e495a3..ced2cf85c724 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -762,6 +762,24 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.children\:snap-start > * {
+  scroll-snap-align: start;
+}
+.children\:snap-always > * {
+  scroll-snap-stop: always;
+}
+.children\:bg-red-100 > * {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+.hover\:children\:bg-red-500 > *:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+.hover\:children\:text-red-100 > *:hover {
+  --tw-text-opacity: 1;
+  color: rgb(254 226 226 / var(--tw-text-opacity));
+}
 [dir='ltr'] .ltr\:shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
diff --git a/tests/variants.test.html b/tests/variants.test.html
index 8a671fe235a2..e6994d35b4a8 100644
--- a/tests/variants.test.html
+++ b/tests/variants.test.html
@@ -50,6 +50,13 @@
     <div class="before:block before:bg-red-500"></div>
     <div class="after:flex after:uppercase"></div>
 
+    <!-- Children variants -->
+    <div class="children:bg-red-100"></div>
+    <div class="hover:children:bg-red-500"></div>
+    <div class="hover:children:text-red-100"></div>
+    <div class="children:snap-start"></div>
+    <div class="children:snap-always"></div>
+
     <!-- Group variants -->
     <div class="group-open:bg-red-200"></div>
     <div class="group-first:shadow-md"></div>