Group variant stacking (#4551)

* make group variant stacking work

* simplify stacking group variants

Author: RobinMalfait

src/jit/corePlugins.js

@@ -156,6 +156,7 @@ export default {
       )
     }
 
+    let baseGroupSelector = prefixSelector(config('prefix'), '.group')
     for (let variant of pseudoVariants) {
       let [variantName, state] = Array.isArray(variant) ? variant : [variant, variant]
       let groupVariantName = `group-${variantName}`
@@ -164,16 +165,36 @@ export default {
         groupVariantName,
         transformAllSelectors((selector) => {
           let variantSelector = updateAllClasses(selector, (className) => {
+            if (`.${className}` === baseGroupSelector) return className
             return `${groupVariantName}${config('separator')}${className}`
           })
 
           if (variantSelector === selector) {
             return null
           }
 
-          let groupSelector = prefixSelector(config('prefix'), `.group:${state}`)
+          let states = [state]
 
-          return `${groupSelector} ${variantSelector}`
+          // Stack group variants
+          let baseGroupIdx = variantSelector.indexOf(baseGroupSelector + ':')
+          if (baseGroupIdx !== -1) {
+            let groupClassName = variantSelector.slice(
+              baseGroupIdx,
+              variantSelector.indexOf(' ', baseGroupIdx)
+            )
+
+            // Pick all the states
+            states = states.concat(
+              variantSelector
+                .slice(baseGroupIdx + baseGroupSelector.length + 1, groupClassName.length)
+                .split(':')
+            )
+
+            // Remove the base `.group:...`
+            variantSelector = variantSelector.replace(groupClassName, '')
+          }
+
+          return `${[baseGroupSelector, ...states].join(':')} ${variantSelector}`
         })
       )
     }

tests/jit/variants.test.css

@@ -347,6 +347,11 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.group:focus:hover .group-focus\:group-hover\:shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .group:focus-visible .group-focus-visible\:shadow-md {
   --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -362,6 +367,17 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.group:disabled:focus:hover .group-disabled\:group-focus\:group-hover\:shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.group:disabled:focus:hover
+  .group-disabled\:group-focus\:group-hover\:first\:shadow-md:first-child {
+  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 [dir='ltr'] .ltr\:shadow-md {
   --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -391,6 +407,11 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.dark .group:disabled:focus:hover .dark\:group-disabled\:group-focus\:group-hover\:shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 @media (min-width: 640px) {
   .sm\:shadow-md {
     --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

tests/jit/variants.test.html

@@ -103,5 +103,11 @@
     <div class="lg:dark:shadow-md"></div>
     <div class="xl:dark:disabledshadow-md"></div>
     <div class="2xl:dark:motion-safe:focus-within:shadow-md"></div>
+
+    <!-- Stacked group variants -->
+    <div class="group-focus:group-hover:shadow-md"></div>
+    <div class="group-disabled:group-focus:group-hover:shadow-md"></div>
+    <div class="dark:group-disabled:group-focus:group-hover:shadow-md"></div>
+    <div class="group-disabled:group-focus:group-hover:first:shadow-md"></div>
   </body>
 </html>