`searchRange` is too small for `cva`

[kachkaev]

What version of VS Code are you using?

1.81.0

What version of Tailwind CSS IntelliSense are you using?

v0.9.11

What version of Tailwind CSS are you using?

v3.3.3

What package manager are you using?

pnpm

What operating system are you using?

macOS

Tailwind config

https://github.com/shadcn-ui/ui/blob/3c9f7ca0e20638bf75833ef920f9b23f5d97bc71/tailwind.config.cjs

VS Code settings

https://github.com/shadcn-ui/ui/blob/3c9f7ca0e20638bf75833ef920f9b23f5d97bc71/.vscode/settings.json

Reproduction URL

https://github.com/shadcn-ui/ui

Describe your issue

When working on a project inspired by chadcn-ui, I noticed that autocompletion was not always working inside a cva() function (class-variance-authority). As it turned out, it was to do with this bit of code in the extension:

tailwindcss-intellisense/packages/tailwindcss-language-service/src/completionProvider.ts

Lines 501 to 504 in 5c59d6f

	const searchRange: Range = {
	start: document.positionAt(Math.max(0, positionOffset - 1000)),
	end: document.positionAt(positionOffset + 1000),
	}

For class name autocompletion to work inside arbitrary chunks of code, the extension looks at the current location of the cursor and then scans the source file 1000 characters both ways. Within this range, it tries to match a regexp, e.g.:

{ // .vscode/settings.json
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

This works in most cases, except when we use cva() with a few variants. Here is an example of that:

https://github.com/shadcn-ui/ui/blob/3c9f7ca0e20638bf75833ef920f9b23f5d97bc71/apps/www/registry/new-york/ui/button.tsx

In the file above, there are 1067 characters between cva( and ), which is greater than 1000. If I place a cursor somewhere in the middle of the function call, autocompletion works because both ends of the regexp are less than 1000 characters away:

However, if I move the cursor so that it gets more than 1000 characters away from either end of cva( ), autocompletion stops working:

It works again if I delete a few class names, thus placing both ends of the regex ‘within reach’:

Thus, a hardcoded range of 1000 characters makes it impossible to configure autocompletion in cva when we have a few variants or compoundVariants to define.

I’d be great to configure this range, e.g.:

 { // .vscode/settings.json
+  "tailwindCSS.experimental.classRegexSearchRange": 5000,
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]",], 
     ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ]
 }

I understand that large ranges may affect performance, so if there are other ways to fix the bug, it’d be great to discuss them! Perhaps, instead of matching for the whole regex end-to-end, the extension can first search for the prefix, then search for the suffix and finally get the ‘islands’ of strings with class names within it. Walking an AST might be something to explore too (this can help with complex cases like JS comments inside cva().

---

PS: Thanks for the extension folks, it makes Tailwind DX a bliss 🤩 This bug with cva is nothing compared with the overall experience 💯

[clementoriol]

I'm still seeing this issue in v0.10.3 in a long (~300 lines) object.

Could we make the searchRange configurable ?

[tomerzcod7]

I'm still having this issue with a long object. Any plan on making it configurable or any other fix?

[peteragarclover]

Looks like the fix increased the range from 1000 to 2000, which is still too small for any sufficiently complex cva config. We're hitting the same with our button component, which provides many different variants.

Can I ask why the range is limited? Would there be an issue just scanning the entire file? Perhaps instead of customizing the search range, could it be unlimited? Or if it needs to be limited, have a much larger value?