Skip to content

Conversation

@javoscript
Copy link
Contributor

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

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

But these would work:

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:

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

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

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

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

@javoscript
Copy link
Contributor Author

Examples:

Not working without the space before the bracket:
Screenshot 2025-07-31 at 20 23 10

Working with the space:
Screenshot 2025-07-31 at 20 23 41

@thecrypticace thecrypticace changed the title Fix class name matching in javascript right after opening square brackets Aug 1, 2025
@thecrypticace thecrypticace merged commit 5d8b5dc into tailwindlabs:main Aug 1, 2025
12 checks passed
@thecrypticace
Copy link
Contributor

I'd say I can't believe I missed that but… I can. 😅

Thanks! I'll tag a release with the fix tomorrow 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants