Speed up project selector matching (#1381)

When a request comes in to the language server for a document we have to
determine what project that document belongs to. This is because your
workspace can have many tailwind config files and potentially across
different Tailwind CSS versions.

The process for this happens in two stages:
1. Initialization computes a list of selectors for a project. These
selectors contain glob patterns that match a filepath to one or more
projects. In addition to the glob pattern is a priority which is a
"lowest match wins" scale. So things like user configured patterns in
settings are the most important, then your config files, then content
from the `content` array in v3 or detected sources in v4, approximate
path matches based on folder, etc…
2. When we get a request for hovers, completions, etc… we check every
project against the list of selectors to see if it matches and at what
priority. This involves compiling glob patterns.

The *lowest* priority match wins. If multiple projects match a document
at the same priority then first match wins. If a project contains a
selector that discards a particular document then that project is
removed from consideration before continuing.

Now for the problem, we were re-compiling globs *over and over and over
again*. Normally, for a small project this isn't an issue but automatic
content detection means that a large number of paths can be returned.
And if you have lots of projects? Welp… this adds up. What's more is
that when VSCode needed to compute document symbols requests were made
to our language server (… i don't know why actually) which then incurred
a perf hit caused by these globs being repeatedly recompiled… and since
this is effectively a single threaded operation it delays any waiting
promises.

So this PR does two things:
- It moves the sorting that was happening for every request for every
project to happen *during project initialization*. If selectors are
computed or recomputed they are sorted then. We do this sorting to move
the negative matchers to the front so we can disqualify files from
matching a project quicker.
- We cache the compiled matchers. This is especially important if you
have several v4 projects and many of them list the same paths.

In a realworld project this lowered the time to show suggestions from
emmet from **4 SECONDS** (omg) to about 15-20ms on an M3 Max machine.

aside: There was also sometimes a delay in time even getting completion
requests due to the single-threaded nature of JS. That could also end up
being multiple seconds. So in reality the time could be from range from
4–8s depending on when you made the request.

Author: thecrypticace

packages/tailwindcss-language-server/src/matching.ts

@@ -0,0 +1,24 @@
+import picomatch from 'picomatch'
+import { DefaultMap } from './util/default-map'
+
+export interface PathMatcher {
+  anyMatches(pattern: string, paths: string[]): boolean
+  clear(): void
+}
+
+export function createPathMatcher(): PathMatcher {
+  let matchers = new DefaultMap<string, picomatch.Matcher>((pattern) => {
+    // Escape picomatch special characters so they're matched literally
+    pattern = pattern.replace(/[\[\]{}()]/g, (m) => `\\${m}`)
+
+    return picomatch(pattern, { dot: true })
+  })
+
+  return {
+    anyMatches: (pattern, paths) => {
+      let check = matchers.get(pattern)
+      return paths.some((path) => check(path))
+    },
+    clear: () => matchers.clear(),
+  }
+}

packages/tailwindcss-language-server/src/project-locator.ts

@@ -815,5 +815,12 @@ export async function calculateDocumentSelectors(
       documentSelectors.findIndex(({ pattern: p }) => p === pattern) === index,
   )
 
+  // Move all the negated patterns to the front
+  selectors = selectors.sort((a, z) => {
+    if (a.pattern.startsWith('!') && !z.pattern.startsWith('!')) return -1
+    if (!a.pattern.startsWith('!') && z.pattern.startsWith('!')) return 1
+    return 0
+  })
+
   return selectors
 }

packages/tailwindcss-language-server/src/tw.ts

@@ -56,6 +56,7 @@ import { ProjectLocator, type ProjectConfig } from './project-locator'
 import type { TailwindCssSettings } from '@tailwindcss/language-service/src/util/state'
 import { createResolver, Resolver } from './resolver'
 import { analyzeStylesheet } from './version-guesser.js'
+import { createPathMatcher, PathMatcher } from './matching.js'
 
 const TRIGGER_CHARACTERS = [
   // class attributes
@@ -104,12 +105,14 @@ export class TW {
   private watched: string[] = []
 
   private settingsCache: SettingsCache
+  private pathMatcher: PathMatcher
 
   constructor(private connection: Connection) {
     this.documentService = new DocumentService(this.connection)
     this.projects = new Map()
     this.projectCounter = 0
     this.settingsCache = createSettingsCache(connection)
+    this.pathMatcher = createPathMatcher()
   }
 
   async init(): Promise<void> {
@@ -151,6 +154,7 @@ export class TW {
   private async _init(): Promise<void> {
     clearRequireCache()
 
+    this.pathMatcher.clear()
     let folders = this.getWorkspaceFolders().map((folder) => normalizePath(folder.uri))
 
     if (folders.length === 0) {
@@ -325,6 +329,7 @@ export class TW {
       let needsRestart = false
       let needsSoftRestart = false
 
+      // TODO: This should use the server-level path matcher
       let isPackageMatcher = picomatch(`**/${PACKAGE_LOCK_GLOB}`, { dot: true })
       let isCssMatcher = picomatch(`**/${CSS_GLOB}`, { dot: true })
       let isConfigMatcher = picomatch(`**/${CONFIG_GLOB}`, { dot: true })
@@ -339,6 +344,7 @@ export class TW {
         normalizedFilename = normalizeDriveLetter(normalizedFilename)
 
         for (let ignorePattern of ignore) {
+          // TODO: This should use the server-level path matcher
           let isIgnored = picomatch(ignorePattern, { dot: true })
 
           if (isIgnored(normalizedFilename)) {
@@ -984,44 +990,20 @@ export class TW {
         continue
       }
 
-      let documentSelector = project
-        .documentSelector()
-        .concat()
-        // move all the negated patterns to the front
-        .sort((a, z) => {
-          if (a.pattern.startsWith('!') && !z.pattern.startsWith('!')) {
-            return -1
-          }
-          if (!a.pattern.startsWith('!') && z.pattern.startsWith('!')) {
-            return 1
-          }
-          return 0
-        })
-
-      for (let selector of documentSelector) {
-        let pattern = selector.pattern.replace(/[\[\]{}()]/g, (m) => `\\${m}`)
-
-        if (pattern.startsWith('!')) {
-          if (picomatch(pattern.slice(1), { dot: true })(fsPath)) {
-            break
-          }
-
-          if (picomatch(pattern.slice(1), { dot: true })(normalPath)) {
-            break
-          }
-        }
-
-        if (picomatch(pattern, { dot: true })(fsPath) && selector.priority < matchedPriority) {
-          matchedProject = project
-          matchedPriority = selector.priority
-
-          continue
+      for (let selector of project.documentSelector()) {
+        if (
+          selector.pattern.startsWith('!') &&
+          this.pathMatcher.anyMatches(selector.pattern.slice(1), [fsPath, normalPath])
+        ) {
+          break
         }
 
-        if (picomatch(pattern, { dot: true })(normalPath) && selector.priority < matchedPriority) {
+        if (
+          selector.priority < matchedPriority &&
+          this.pathMatcher.anyMatches(selector.pattern, [fsPath, normalPath])
+        ) {
           matchedProject = project
           matchedPriority = selector.priority
-
           continue
         }
       }

packages/tailwindcss-language-server/src/util/isExcluded.ts

@@ -20,6 +20,7 @@ export default async function isExcluded(
     pattern = normalizePath(pattern)
     pattern = normalizeDriveLetter(pattern)
 
+    // TODO: This should use the server-level path matcher
     if (picomatch(pattern)(file)) {
       return true
     }