Intellisense stop working with CVA with a lot of variants (searchRange too small)

[tomerzcod7]

What version of VS Code are you using?

1.92

What version of Tailwind CSS IntelliSense are you using?

v0.12.6

What version of Tailwind CSS are you using?

3.4.7

What package manager are you using?

npm

What operating system are you using?

macOs

Describe your issue

I'm building a design system with tailwindcss and class variance authority (CVA) where some components have many different variants. We are also using design tokens with long names.

When the tailwind variants object and classes gets too big, tailwind intellisense, hovering and autocomplete stop working.
This apparently has something do with the searchRange (See #837)

I understand this was increased but it still doesn't work for many options.

Is this configureable? Is there anything that can be done to fix it?

Code example that fails

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',
    },
  },
);

[peteragarclover]

Looks like there is ongoing discussion about this on

• searchRange is too small for cva #837
• Expand classRegex search range #840

But both of those tickets are closed so not sure if the conversation is surfacing. Could we expand the searchRange to be unlimited? E.g. just scan the whole file? Or at least significantly (like, an order of magnitude) longer?

[tomerzcod7]

If there's some editor performance issues with making the searchRange unlimited, being able to configure it for your certain use case is also fine. Just would really appreciate a solution because tailwind without the intellisense is totally different and degraded DX

[phuoclt-sens]

I’m interested in configuring the searchRange in VSCode settings to better handle extensive Tailwind configurations

[gustavgenberg]

import { cva, cx } from "class-variance-authority";

const variants = {
  variant: {
    "blue": cx("bg-blue-500"),
    "red": cx("bg-red-500"),

    // ...

    "yellow": cx("bg-yellow-500"),
    "green": cx("bg-green-500"),
  }
}

const button = cva(null, {
  variants,
});

This seems to be working as a workaround, although maybe not the best for performance.

[nightgrey]

So far, this regex "circumvents" the search limit and works for me!

{
    "classRegex": [
      "(?<=cva\\([\\s\\S]*?)[\"']([^\"']+)[\"']"
    ]
}

As far as I understand, only the matches count against the search limit, so if your regex matches everything inside cva, you'll hit the search limit extremely quickly.

But this regex only matches the actual class strings when they're inside cva() - this means you have to have a single > 1000 class string to hit the limit - and if you do, you can split into arrays.

So far, this works beautifully :)

Edit: Whoops, screwed up the first regex. Also, after using this for a while, I've never had it fail! :)