Skip to content

Commit

Permalink
Make class search range larger (#1192)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
thecrypticace authored Feb 12, 2025
1 parent c2660e4 commit b32b3b0
Show file tree
Hide file tree
Showing 4 changed files with 11 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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,
})

Expand Down Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions packages/tailwindcss-language-service/src/util/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/**
* The maximum bounds around the cursor when searching for class names
*/
export const SEARCH_RANGE = 15_000
5 changes: 3 additions & 2 deletions packages/tailwindcss-language-service/src/util/find.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)) {
Expand Down
1 change: 1 addition & 0 deletions packages/vscode-tailwindcss/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

0 comments on commit b32b3b0

Please sign in to comment.