Allow variants to request outer wrapper nodes

Author: SHARMA1525

packages/tailwindcss/src/ast.ts

@@ -325,16 +325,6 @@ export function optimizeAst(
 
 
 
-      if (
-        nodes.length === 1 &&
-        nodes[0].kind === 'at-rule' &&
-        (nodes[0].name === '@media' || nodes[0].name === '@supports' || nodes[0].name === '@container' || nodes[0].name === '@scope')
-      ) {
-        let at = nodes[0]
-        parent.push(atRule(at.name, at.params, [styleRule(node.selector, at.nodes)]))
-        return
-      }
-
       // Rules with `&` as the selector should be flattened
       if (node.selector === '&') {
         parent.push(...nodes)

packages/tailwindcss/src/compat/plugin-api.ts

@@ -145,7 +145,18 @@ export function buildPluginApi({
         designSystem.variants.static(
           name,
           (r) => {
-            r.nodes = parseVariantValue(variant, r.nodes)
+            let body = parseVariantValue(variant, r.nodes)
+
+            const isBlock =
+              typeof variant === 'string'
+                ? variant.trim().endsWith('}')
+                : variant.some((v) => v.trim().endsWith('}'))
+
+            if (isBlock && body.length === 1 && body[0].kind === 'at-rule') {
+              return body[0]
+            }
+
+            r.nodes = body
           },
           {
             compounds: compoundsForSelectors(typeof variant === 'string' ? [variant] : variant),

packages/tailwindcss/src/compile.ts

@@ -197,6 +197,10 @@ export function applyVariant(
   // not hitting this code path.
   let { applyFn } = variants.get(variant.root)!
 
+
+
+  let originalSelector = node.kind === 'rule' ? (node as StyleRule).selector : undefined
+
   if (variant.kind === 'compound') {
     // Some variants traverse the AST to mutate the nodes. E.g.: `group-*` wants
     // to prefix every selector of the variant it's compounding with `.group`.
@@ -255,6 +259,47 @@ export function applyVariant(
   // All other variants
   let result = applyFn(node, variant)
   if (result === null) return null
+
+
+
+
+
+
+  if (result && typeof result === 'object' && 'kind' in (result as any)) {
+    const newNode = result as AstNode
+    if (newNode.kind === 'at-rule' && originalSelector) {
+      let replaced = false
+      walk(newNode.nodes, (child) => {
+        if (child.kind === 'rule' && child.selector === '&') {
+          child.selector = originalSelector!
+          replaced = true
+        }
+      })
+
+      if (!replaced) {
+        newNode.nodes = [rule(originalSelector!, newNode.nodes)]
+      }
+    }
+
+
+    if (newNode.kind === 'at-rule') {
+      ;(node as any).kind = 'at-rule'
+      ;(node as any).name = newNode.name
+      ;(node as any).params = newNode.params
+      ;(node as any).nodes = newNode.nodes
+
+      delete (node as any).selector
+    } else if (newNode.kind === 'rule') {
+      ;(node as any).kind = 'rule'
+      ;(node as any).selector = newNode.selector
+      ;(node as any).nodes = newNode.nodes
+      delete (node as any).name
+      delete (node as any).params
+    } else {
+
+      ;(node as any).nodes = (newNode as any).nodes ?? []
+    }
+  }
 }
 
 function isFallbackUtility(utility: Utility) {

packages/tailwindcss/src/variants.ts

@@ -26,7 +26,7 @@ export const IS_VALID_VARIANT_NAME = /^@?[a-z0-9][a-zA-Z0-9_-]*(?<![_-])$/
 type VariantFn<T extends Variant['kind']> = (
   rule: Rule,
   variant: Extract<Variant, { kind: T }>,
-) => null | void
+) => null | void | AstNode
 
 type CompareFn = (a: Variant, z: Variant) => number