Skip to content

Conversation

@jrgarciadev
Copy link
Member

Description

This PR splits the cn function into two separate functions (cn and cnMerge) to eliminate the Proxy complexity that was causing errors. The previous implementation used a Proxy to support dual usage patterns (direct usage and config-based usage), which introduced complexity and type issues.

Changes:

  • cn: Simplified function that returns a string directly with default twMerge config. No function call needed - just cn("px-2", "px-4") returns "px-4".
  • cnMerge: New function that supports custom twMerge config via a second function call. Usage: cnMerge("px-2", "px-4")({twMerge: false}) returns "px-2 px-4".

Implementation details:

  • Extracted shared merge logic into executeMerge helper function
  • Removed Proxy implementation entirely
  • Updated core.js to use cnMerge for config-based calls (passed as parameter to getTailwindVariants)
  • Updated all tests to reflect the new API
  • Added comprehensive documentation in README explaining the difference between cx, cn, and cnMerge

Additional context

This is a breaking change for users who were calling cn(...)() with an empty call or relying on the Proxy's string coercion. However, the common use case of cn("...") now works more intuitively by returning a string directly. Users who need custom config should migrate to cnMerge.

The split provides:

  • Better TypeScript support (no Proxy types)
  • Clearer API intent
  • Better performance (no Proxy overhead)
  • Easier maintenance

What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Follow the Style Guide.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).

- Split cn function into two separate functions to avoid Proxy complexity
- cn: simple function that returns string directly with default twMerge config
- cnMerge: function that supports custom twMerge config via second call
- Update core.js to use cnMerge for config-based calls
- Update tests to reflect new API
- Update README with utility functions documentation
- Available from v3.2.2
@jrgarciadev jrgarciadev merged commit ee83f93 into main Nov 22, 2025
4 checks passed
@jrgarciadev jrgarciadev deleted the fix/cn-split branch November 22, 2025 22:44
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