feat(utils): improve TypeScript type safety in cn utility#11
Conversation
There was a problem hiding this comment.
Code Review
This pull request introduces unit tests for the cn utility function, refactors the utility to use stricter TypeScript types, and updates the TypeScript configuration to include test files and types. The review feedback suggests further tightening the StrictClassDictionary type to prevent runtime bugs from non-primitive values, and recommends removing test-specific types from the main application configuration (tsconfig.app.json) to avoid polluting the global namespace.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
There was a problem hiding this comment.
Pull request overview
This PR tightens the TypeScript typing around the cn className utility, adds a Vitest suite to validate its runtime behavior, and updates the app TypeScript config to typecheck tests with the appropriate test-related ambient types.
Changes:
- Replaced
ClassValueusage with customStrictClassValuetypes and updatedcnto callclsx(...inputs)and returnstring. - Added
src/utils/cn.test.tscovering commoncnusage patterns and Tailwind conflict resolution. - Expanded
tsconfig.app.jsonto include thetestsdirectory and added Vitest / jest-dom types; added a newpackage-lock.json.
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| tsconfig.app.json | Includes tests in TS project and adds test-related types for Vitest/jest-dom. |
| src/utils/cn.ts | Introduces stricter cn input types + JSDoc updates; keeps twMerge(clsx(...)) pipeline. |
| src/utils/cn.test.ts | Adds Vitest coverage for cn behavior, including Tailwind merge behavior. |
| package-lock.json | Adds an npm lockfile (in addition to existing pnpm lockfile). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
133d7ca to
3ca96e5
Compare
|
Hi @abhishek-nexgen-dev , This PR improves the TypeScript type safety of the What's Included
Verification
This PR is intentionally scoped to the issue requirements and focuses only on improving type safety, test coverage, and maintainability of the Thank you for your review and feedback! |
Summary
fix #10
This PR improves type safety for the
cnutility by replacing permissive type structures with stricter TypeScript definitions, adding comprehensive test coverage, and enhancing developer documentation while preserving existing runtime behavior.Changes Made
Type Safety Improvements (
src/utils/cn.ts)ClassValueusage with stricter custom type definitions.Record<string, any>toRecord<string, unknown>.string.clsxandtailwind-mergebehavior.Unit Tests (
src/utils/cn.test.ts)Added a dedicated Vitest test suite covering:
nullandundefinedinputstailwind-mergeTest Configuration (
tsconfig.app.json)Why This Change?
The previous implementation relied on permissive typing that could allow invalid values to be passed without TypeScript warnings. This update strengthens compile-time validation while maintaining identical runtime behavior.
Testing
cnutility tests pass locally.Acceptance Criteria
cnNotes for Reviewers
This change is focused exclusively on improving the safety, maintainability, and test coverage of the
cnutility. The underlying implementation continues to use the existingtwMerge(clsx(...))pipeline, so no visual or behavioral changes are expected in existing components.