Make class search range larger (#1192)

After doing an admittedly quite small amount of benchmarking it seems
that expanding the search range _does_ have a perf impact but it's not
so much of one that we shouldn't increase it. Though this very likely
depends on the regex in use.

I've done a few major things in this PR:
- Searching for class lists when hovering now starts at the beginning of
the document. This important for users who are using things like `cva`
(the same reason it was expanded for completions in #840)
- The search range for completions inside a class attribute have been
expanded to 15k characters. This is useful if you're using a really
large cva definition in one class list.
- Ditto for searching for custom regexes which is useful when using CVA
with separate variables in a JSX/TSX document.

Fixes #1032
Fixes #984

This is a mostly a stop-gap measure until I can land a better system for
"parsing" documents that aims to make most class detection trivial and
quite fast.

Custom regexes won't necessarily be able to take advantage of that but
if I can get some perf wins elsewhere I might be able to expand the
search range even further. Ideally I'd figure out a way to run regexes
in a worker thread and allow them to be "cancelled" when they take too
long but that is a fairly major-ish undertaking.

Author: thecrypticace

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

@@ -42,9 +42,9 @@ import { IS_SCRIPT_SOURCE, IS_TEMPLATE_SOURCE } from './metadata/extensions'
 import * as postcss from 'postcss'
 import { findFileDirective } from './completions/file-paths'
 import type { ThemeEntry } from './util/v4'
-import { posix } from 'node:path/win32'
 import { segment } from './util/segment'
 import { resolveKnownThemeKeys, resolveKnownThemeNamespaces } from './util/v4/theme-keys'
+import { SEARCH_RANGE } from './util/constants'
 
 let isUtil = (className) =>
   Array.isArray(className.__info)
@@ -729,7 +729,7 @@ async function provideClassAttributeCompletions(
   context?: CompletionContext,
 ): Promise<CompletionList> {
   let str = document.getText({
-    start: document.positionAt(Math.max(0, document.offsetAt(position) - 2000)),
+    start: document.positionAt(Math.max(0, document.offsetAt(position) - SEARCH_RANGE)),
     end: position,
   })
 
@@ -796,7 +796,7 @@ async function provideCustomClassNameCompletions(
 
   let text = document.getText({
     start: document.positionAt(0),
-    end: document.positionAt(cursor + 2000),
+    end: document.positionAt(cursor + SEARCH_RANGE),
   })
 
   // Get completions from the first matching regex or regex pair

packages/tailwindcss-language-service/src/util/constants.ts

@@ -0,0 +1,4 @@
+/**
+ * The maximum bounds around the cursor when searching for class names
+ */
+export const SEARCH_RANGE = 15_000

packages/tailwindcss-language-service/src/util/find.ts

@@ -13,6 +13,7 @@ import { resolveRange } from './resolveRange'
 import { getTextWithoutComments } from './doc'
 import { isSemicolonlessCssLanguage } from './languages'
 import { customClassesIn } from './classes'
+import { SEARCH_RANGE } from './constants'
 
 export function findAll(re: RegExp, str: string): RegExpMatchArray[] {
   let match: RegExpMatchArray
@@ -437,8 +438,8 @@ export async function findClassNameAtPosition(
   let classNames: DocumentClassName[] = []
   const positionOffset = doc.offsetAt(position)
   const searchRange: Range = {
-    start: doc.positionAt(Math.max(0, positionOffset - 2000)),
-    end: doc.positionAt(positionOffset + 2000),
+    start: doc.positionAt(0),
+    end: doc.positionAt(positionOffset + SEARCH_RANGE),
   }
 
   if (isVueDoc(doc)) {

packages/vscode-tailwindcss/CHANGELOG.md

@@ -11,6 +11,7 @@
 - Fix suggestion of utilities with slashes in them in v4 ([#1182](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1182))
 - Assume 16px font size for `1rem` in media queries ([#1190](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1190))
 - Show warning when loading a config in v3 fails ([#1191](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1191))
+- Better handle really long class lists in attributes and custom regexes ([#1192](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1192))
 
 ## 0.14.3