Nested `@variant` inside `@custom-variant`

[sntran]

What version of Tailwind CSS are you using?

v4.1.11

Reproduction URL

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

Describe your issue

For the purpose of reusing, I declare a @custom-variant for @support. In another custom variant @scroll-stuck-top, I would like to use that supports-scroll-state variant to add fallback. I expected the nested @variant would be replaced with the definition of the corresponding @custom-variant, but instead, it was kept as-is.

@custom-variant supports-scroll-state {
  @supports (container-type: scroll-state) {
    @slot;
  }
}

@custom-variant @scroll-stuck-top {
  @container scroll-state(stuck: top) { @slot; }

  @variant not-supports-scroll-state {
    \@scroll-stuck-top & { @slot }
  }
}

Expected Output

.\@scroll-stuck-top\:border-b-2 {
  @container scroll-state(stuck: top) {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  @supports not (container-type: scroll-state) {
    \@scroll-stuck-top & {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 2px;
    }
  }
}

Actual Output

.\@scroll-stuck-top\:border-b-2 {
  @container scroll-state(stuck: top) {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  @variant not-supports-scroll-state {
    \@scroll-stuck-top & {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 2px;
    }
  }
}

[TobyPerplex]

Maybe it's because of this? parcel-bundler/lightningcss#887

[sntran]

Maybe it's because of this? parcel-bundler/lightningcss#887

I thought it may have been the case, so I tried something more supported:

https://play.tailwindcss.com/0ylqcfre9X

The output still generates:

.stuck\:border-b-2 {
  @variant not-supports-sticky {
    &.stuck {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 2px;
    }
  }
}

[thecrypticace]

Nah, this is because we're not evaluating @variants used inside custom variants.