Discard function matches that appear after the current cursor in completions (#1278)

Look, it's not a fancy shiny new feature without a bug 😅 

When we discover function matches via `tailwindCSS.classFunctions` we
were implicitly breaking some assumptions used by the completions code:
- No matches for class attributes or functions that appear _after_ the
cursor position are found (we weren't discarding these function matches
but we need to)
- The *last* match is always the one that corresponds to the current
cursor position (we collect function matches separately so the order was
wrong)

This PR fixes this by doing two things:
- Discarding function matches that appear after the current cursor
position
- Sorting the list of attribute and function matches so the last one in
the list is always the latest one in the document (up to the cursor)

Author: thecrypticace

packages/tailwindcss-language-server/tests/completions/completions.test.js

@@ -849,3 +849,61 @@ defineTest({
     })
   },
 })
+
+defineTest({
+  name: 'v4: class function completions mixed with class attribute completions work',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+    `,
+  },
+  prepare: async ({ root }) => ({ client: await createClient({ root }) }),
+  handle: async ({ client }) => {
+    let document = await client.open({
+      settings: {
+        tailwindCSS: {
+          classAttributes: ['className'],
+          classFunctions: ['cn', 'cva'],
+        },
+      },
+      lang: 'javascriptreact',
+      text: js`
+        let x = cva("")
+
+        export function Button() {
+          return <Test className={cn("")} />
+        }
+
+        export function Button2() {
+          return <Test className={cn("")} />
+        }
+
+        let y = cva("")
+      `,
+    })
+
+    // let x = cva("");
+    //             ^
+    let completionA = await document.completions({ line: 0, character: 13 })
+
+    expect(completionA?.items.length).toBe(12289)
+
+    //   return <Test className={cn("")} />;
+    //                              ^
+    let completionB = await document.completions({ line: 3, character: 30 })
+
+    expect(completionB?.items.length).toBe(12289)
+
+    //   return <Test className={cn("")} />;
+    //                              ^
+    let completionC = await document.completions({ line: 7, character: 30 })
+
+    expect(completionC?.items.length).toBe(12289)
+
+    // let y = cva("");
+    //             ^
+    let completionD = await document.completions({ line: 10, character: 13 })
+
+    expect(completionD?.items.length).toBe(12289)
+  },
+})

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

@@ -703,8 +703,9 @@ async function provideClassAttributeCompletions(
   position: Position,
   context?: CompletionContext,
 ): Promise<CompletionList> {
+  let current = document.offsetAt(position)
   let range: Range = {
-    start: document.positionAt(Math.max(0, document.offsetAt(position) - SEARCH_RANGE)),
+    start: document.positionAt(Math.max(0, current - SEARCH_RANGE)),
     end: position,
   }
 
@@ -734,13 +735,17 @@ async function provideClassAttributeCompletions(
     let offset = document.offsetAt(boundary.range.start)
     let fnMatches = matchClassFunctions(str, settings.classFunctions)
 
-    fnMatches.forEach((match) => {
+    for (let match of fnMatches) {
       if (match.index) match.index += offset
-    })
+      if (match.index > current) continue
 
-    matches.push(...fnMatches)
+      matches.push(match)
+    }
   }
 
+  // Make sure matches are sorted by index
+  matches.sort((a, b) => a.index - b.index)
+
   if (matches.length === 0) {
     return null
   }

packages/vscode-tailwindcss/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Prerelease
 
-- Nothing yet!
+- Fix completions not showing for some class attributes when a class function exists in the document ([#1278](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1278))
 
 # 0.14.10