Variant inside custom variant makes the app crash

[whazami]

What version of Tailwind CSS are you using?

v4.1.18

What build tool (or framework if it abstracts the build tool) are you using?

SvelteKit 2.50.1, Vite 7.3.1

What version of Node.js are you using?

Bun v1.3.7

What browser are you using?

I tried on Chrome and Firefox

What operating system are you using?

I tried on Windows and iOS

Reproduction URL

https://play.tailwindcss.com/y7UanzVm71?file=css

Describe your issue

I tried to nest a @variant directive inside a @custom-variant (I saw the #18885 PR should have made it possible) like this:

@custom-variant a {
  @slot;
}

@custom-variant b {
  @variant a {
    @slot;
  }
}

but when I use the b: variant in HTML, it makes my app crash (no error message, I have to kill -9 its pid to stop it completely).

You can see in the Tailwind Play URL that it keeps loading infinitely.

[Shashikant2005]

Hi 👋
From the reproduction, it looks like nesting @variant inside @custom-variant can lead to an infinite recursion during variant processing, which causes the compiler to hang instead of erroring. Since this was enabled by #18885, it seems like a missing safeguard (e.g. cycle detection or validation). I’d be happy to investigate and work on a fix if I can take this issue.

[wongjn]

Yea, seems to be an infinite loop somewhere around here

tailwindcss/packages/tailwindcss/src/variants.ts

Lines 1195 to 1208 in d52c94f

	export function substituteAtSlot(ast: AstNode[], nodes: AstNode[]) {
	walk(ast, (node) => {
	// Replace `@slot` with rule nodes
	if (node.kind === 'at-rule' && node.name === '@slot') {
	return WalkAction.Replace(nodes)
	}
	// Wrap `@keyframes` and `@property` in `AtRoot` nodes
	else if (node.kind === 'at-rule' && (node.name === '@keyframes' || node.name === '@property')) {
	Object.assign(node, atRoot([atRule(node.name, node.params, node.nodes)]))
	return WalkAction.Skip
	}
	})
	}

The nodes AST collection represents the inner @variant a { @slot } and the inner @slot keeps getting replaced with itself, causing the infinite recursion.

I wrote a test and made it pass with the following change, but I don't quite understand the logic fully so not sure if this is the best approach:

       return WalkAction.Replace(nodes)
     }
+
+    else if (node.kind === 'at-rule' && node.name === '@variant') {
+      return WalkAction.Skip
+    }

     // Wrap `@keyframes` and `@property` in `AtRoot` nodes
     else if (node.kind === 'at-rule' && (node.name === '@keyframes' || node.name === '@property')) {
       Object.assign(node, atRoot([atRule(node.name, node.params, node.nodes)]))

Test:

  test('@custom-variant can use existing @slot @variants', async () => {
    expect(
      await compileCss(
        css`
          @custom-variant hocus {
            @variant hover {
              @variant focus {
                @slot;
              }
            }
          }

          @custom-variant hover {
            &:hover {
              @slot;
            }

            &[data-hover] {
              @slot;
            }
          }

          @tailwind utilities;
        `,
        ['hocus:flex'],
      ),
    ).toMatchInlineSnapshot(`
      ".hocus\\:flex:hover:focus, .hocus\\:flex[data-hover]:focus {
        display: flex;
      }"
    `)
  })

[RobinMalfait]

This should be fixed by #19633, and will be available in the next release.

You can already try it by using the insiders build npm install tailwindcss@insiders.