Skip to content

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

Merged
thecrypticace merged 2 commits into
tailwindlabs:mainfrom
javoscript:main
Aug 1, 2025
Merged

Match class functions that appear after an opening square bracket#1428
thecrypticace merged 2 commits into
tailwindlabs:mainfrom
javoscript:main

Conversation

@javoscript

Copy link
Copy Markdown
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
Copy Markdown
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 Match class functions that appear after an opening square bracket Aug 1, 2025
@thecrypticace
thecrypticace merged commit 5d8b5dc into tailwindlabs:main Aug 1, 2025
12 checks passed
@thecrypticace

Copy link
Copy Markdown
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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants