Tailwind Intellisense not working when the cva function receives a big object of variants

[tomerzcod7]

Describe the bug Tailwind Intellisense not working properly when the cva function receives a big object of variants

To Reproduce Code example from my design system project. Intellisense is not working on the top lines of the function. If I reduce the number of variants it returns to work properly.

export const buttonVariants = cva(
  'l-inline-flex l-items-center l-justify-center l-whitespace-nowrap l-rounded l-transition-colors focus-visible:l-outline-none focus-visible:l-ring-2 focus-visible:l-ring-black_and_white-black focus-visible:l-ring-offset-2 disabled:l-pointer-events-none',
  {
    variants: {
      variant: {
        primaryFill:
          'l-bg-fill-brand l-text-text_and_icons-primary-inverse hover:l-bg-fill-brand-hover active:l-bg-fill-brand-pressed disabled:l-bg-fill-disabled',
        primaryOutline:
          'l-border l-border-stroke-neutral-1 l-bg-fill-neutral-transparent l-text-text_and_icons-brand-primary hover:l-bg-fill-neutral-transparent-hover active:l-border-stroke-brand-1 active:l-bg-fill-neutral-transparent-pressed disabled:l-border-stroke-disabled-weak disabled:l-text-text_and_icons-disabled',
        primaryGhost:
          'l-bg-fill-neutral-transparent l-text-text_and_icons-brand-primary hover:l-bg-fill-neutral-transparent-hover active:l-bg-fill-neutral-transparent-pressed disabled:l-text-text_and_icons-disabled',
        secondaryFill:
          'l-bg-fill-neutral-low l-text-text_and_icons-primary hover:l-bg-fill-neutral-low-hover active:l-bg-fill-neutral-low-pressed disabled:l-bg-fill-disabled disabled:l-text-text_and_icons-on-disabled',
        secondaryOutlineStrong:
          'l-border l-border-stroke-neutral-3 l-bg-fill-neutral-transparent l-text-text_and_icons-primary hover:l-bg-fill-neutral-transparent-hover active:l-bg-fill-neutral-transparent-pressed disabled:l-border-stroke-disabled disabled:l-bg-fill-disabled-transparent disabled:l-text-text_and_icons-disabled',
        secondaryOutlineWeak:
          'l-border l-border-stroke-neutral-1 l-bg-fill-neutral-transparent l-text-text_and_icons-primary hover:l-bg-fill-neutral-transparent-hover active:l-border-stroke-brand-1 active:l-bg-fill-neutral-transparent-pressed disabled:l-border-stroke-disabled-weak disabled:l-bg-fill-disabled-transparent disabled:l-text-text_and_icons-disabled',
        secondaryGhost:
          'l-bg-fill-neutral-transparent l-text-text_and_icons-primary hover:l-bg-fill-neutral-transparent-hover active:l-bg-fill-neutral-transparent-pressed disabled:l-bg-fill-disabled-transparent disabled:l-text-text_and_icons-disabled',
        positiveFill:
          'l-bg-fill-positive l-text-text_and_icons-primary-inverse hover:l-bg-fill-positive-hover active:l-bg-fill-positive-pressed disabled:l-bg-fill-disabled disabled:l-text-text_and_icons-on-disabled',
        negativeFill:
          'l-bg-fill-negative l-text-text_and_icons-primary-inverse hover:l-bg-fill-negative-hover active:l-bg-fill-negative-pressed disabled:l-bg-fill-disabled disabled:l-text-text_and_icons-on-disabled',
        primaryFillInverse:
          'l-bg-fill-brand-inverse l-text-text_and_icons-primary hover:l-bg-fill-brand-hover-inverse active:l-bg-fill-brand-pressed-inverse disabled:l-bg-fill-disabled-inverse disabled:l-text-text_and_icons-on-disabled-inverse',
        primaryOutlineInverse:
          'l-border l-border-stroke-brand-inverse l-bg-fill-neutral-transparent-inverse l-text-text_and_icons-primary-inverse hover:l-bg-fill-neutral-transparent-hover-inverse active:l-bg-fill-neutral-transparent-pressed-inverse disabled:l-border-stroke-disabled-inverse disabled:l-bg-fill-disabled-transparent-inverse disabled:l-text-text_and_icons-disabled-inverse',
        primaryGhostInverse:
          'l-bg-fill-neutral-transparent-inverse l-text-text_and_icons-primary-inverse hover:l-bg-fill-neutral-transparent-hover-inverse active:l-bg-fill-neutral-transparent-pressed-inverse disabled:l-bg-fill-disabled-transparent-inverse disabled:l-text-text_and_icons-disabled-inverse',
      },
      size: {
        sm: 'l-px-xs l-py-2xs l-text-body-small-semi',
        md: 'l-px-sm l-py-2xs l-text-body-normal-semi',
        lg: 'l-px-sm l-py-xs l-text-body-big-semi',
      },
    },
    defaultVariants: {
      variant: 'primaryFill',
      size: 'md',
    },
  },
);

Expected behavior Intellisense should work properly no matter how big or how many variants you have. Either that or make the range configurable for these certain use cases.

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome