Match class functions that appear after an opening square bracket (#1428)

**The problem:**
The lookbehind pattern `(?<=^|[:=,;\s{()])` doesn't include `[` in its
character class, so these cases would be missed:

```javascript
const classes = [clsx('btn', 'primary')]  // ❌ "clsx" not matched
const arr = [cn('text-red-500')]          // ❌ "cn" not matched  
```

But these would work:

```javascript
const classes = [ clsx('btn', 'primary')] // ✅ matches (whitespace after [)
const arr = [, cn('text-red-500')]        // ✅ matches (comma before cn)
```

**Why this matters:**
Array contexts are common in modern JavaScript/React for combining
classes:

```javascript
const buttonClasses = [clsx(conditionalClasses), baseClasses]
const styles = [cn(variantStyle), defaultStyle]
```

**The Fix:**
The regex should include `[` in the lookbehind character class:

```javascript
/(?<=^|[:=,;\s{()\[])([\p{ID_Start}$_][\p{ID_Continue}$_.]*)[(`]/dgiu
//               ^ add \[ here
```

This would ensure we properly detect class utility functions at the
beginning of arrays.

---------

Co-authored-by: Javier Ugarte <[email protected]>
Co-authored-by: Jordan Pittman <[email protected]>

Author: 3 people

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

@@ -1081,3 +1081,30 @@ test('class functions work inside astro code fences', async ({ expect }) => {
     },
   ])
 })
+
+test('classFunctions are detected inside of arrays in javascript just after opening bracket', async ({ expect }) => {
+  let file = createDocument({
+    name: 'file.js',
+    lang: 'javascript',
+    settings: {
+      tailwindCSS: {
+        classFunctions: ['cn'],
+      },
+    },
+    content: js`
+      const list = [cn('relative')]
+    `,
+  })
+
+  let classLists = await findClassListsInHtmlRange(file.state, file.doc, 'js')
+
+  expect(classLists).toEqual([
+    {
+      classList: 'relative',
+      range: {
+        start: { line: 0, character: 18 },
+        end: { line: 0, character: 26 },
+      },
+    },
+  ])
+})

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

@@ -179,7 +179,7 @@ export function matchClassFunctions(text: string, fnNames: string[]): RegExpMatc
   // - It needs to be in an expression position — so it must be preceded by
   // whitespace, parens, curlies, commas, whitespace, etc…
   // - It must look like a fn call or a tagged template literal
-  let FN_NAMES = /(?<=^|[:=,;\s{()])([\p{ID_Start}$_][\p{ID_Continue}$_.]*)[(`]/dgiu
+  let FN_NAMES = /(?<=^|[:=,;\s{()\[])([\p{ID_Start}$_][\p{ID_Continue}$_.]*)[(`]/dgiu
   let foundFns = findAll(FN_NAMES, text)
 
   // 3. Match against the function names in the document

packages/vscode-tailwindcss/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Prerelease
 
-- Nothing yet!
+- Match class functions that appear after an opening square bracket ([#1428](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1428))
 
 ## 0.14.25