Don't swallow @utility declarations when @apply is used in nested lists

Author: philipp-spiess

packages/tailwindcss/src/apply.ts

@@ -146,39 +146,45 @@ export function substituteAtApply(ast: AstNode[], designSystem: DesignSystem) {
     visit(node)
   }
 
-  // Substitute the `@apply` at-rules in order
-  walk(sorted, (node, { replaceWith }) => {
-    if (node.kind !== 'at-rule' || node.name !== '@apply') return
-    let candidates = node.params.split(/\s+/g)
-
-    // Replace the `@apply` rule with the actual utility classes
-    {
-      // Parse the candidates to an AST that we can replace the `@apply` rule
-      // with.
-      let candidateAst = compileCandidates(candidates, designSystem, {
-        onInvalidCandidate: (candidate) => {
-          throw new Error(`Cannot apply unknown utility class: ${candidate}`)
-        },
-      }).astNodes
-
-      // Collect the nodes to insert in place of the `@apply` rule. When a rule
-      // was used, we want to insert its children instead of the rule because we
-      // don't want the wrapping selector.
-      let newNodes: AstNode[] = []
-      for (let candidateNode of candidateAst) {
-        if (candidateNode.kind === 'rule') {
-          for (let child of candidateNode.nodes) {
-            newNodes.push(child)
+  // Substitute the `@apply` at-rules in order. Note that the list is going to
+  // be flattened so we do not have to recursively walk over child rules
+  for (let parent of sorted) {
+    if (!('nodes' in parent)) continue
+
+    for (let i = 0; i < parent.nodes.length; i++) {
+      let node = parent.nodes[i]
+      if (node.kind !== 'at-rule' || node.name !== '@apply') continue
+
+      let candidates = node.params.split(/\s+/g)
+
+      // Replace the `@apply` rule with the actual utility classes
+      {
+        // Parse the candidates to an AST that we can replace the `@apply` rule
+        // with.
+        let candidateAst = compileCandidates(candidates, designSystem, {
+          onInvalidCandidate: (candidate) => {
+            throw new Error(`Cannot apply unknown utility class: ${candidate}`)
+          },
+        }).astNodes
+
+        // Collect the nodes to insert in place of the `@apply` rule. When a rule
+        // was used, we want to insert its children instead of the rule because we
+        // don't want the wrapping selector.
+        let newNodes: AstNode[] = []
+        for (let candidateNode of candidateAst) {
+          if (candidateNode.kind === 'rule') {
+            for (let child of candidateNode.nodes) {
+              newNodes.push(child)
+            }
+          } else {
+            newNodes.push(candidateNode)
           }
-        } else {
-          newNodes.push(candidateNode)
         }
-      }
 
-      replaceWith(newNodes)
+        parent.nodes.splice(i, 1, ...newNodes)
+      }
     }
-  })
-
+  }
   return features
 }
 

packages/tailwindcss/src/index.test.ts

@@ -530,6 +530,41 @@ describe('@apply', () => {
       }"
     `)
   })
+
+  // https://github.com/tailwindlabs/tailwindcss/issues/16935
+  it('should now swallow @utility declarations when @apply is used in nested rules', async () => {
+    expect(
+      await compileCss(
+        css`
+          @tailwind utilities;
+
+          .ignore-me {
+            @apply underline;
+            div {
+              @apply custom-utility;
+            }
+          }
+
+          @utility custom-utility {
+            @apply flex;
+          }
+        `,
+        ['custom-utility'],
+      ),
+    ).toMatchInlineSnapshot(`
+      ".custom-utility {
+        display: flex;
+      }
+
+      .ignore-me {
+        text-decoration-line: underline;
+      }
+
+      .ignore-me div {
+        display: flex;
+      }"
+    `)
+  })
 })
 
 describe('arbitrary variants', () => {