Skip to content

feat(utils): improve TypeScript type safety in cn utility#11

Open
sarv-tech wants to merge 1 commit into
NexGenStudioDev:masterfrom
sarv-tech:fix-cn-typescript-safety
Open

feat(utils): improve TypeScript type safety in cn utility#11
sarv-tech wants to merge 1 commit into
NexGenStudioDev:masterfrom
sarv-tech:fix-cn-typescript-safety

Conversation

@sarv-tech

Copy link
Copy Markdown

Summary

fix #10

This PR improves type safety for the cn utility 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)

  • Replaced generic ClassValue usage with stricter custom type definitions.
  • Updated conditional class object typing from Record<string, any> to Record<string, unknown>.
  • Refactored recursive array typing to avoid TypeScript cyclic reference issues.
  • Explicitly defined the function return type as string.
  • Preserved compatibility with existing clsx and tailwind-merge behavior.

Unit Tests (src/utils/cn.test.ts)

Added a dedicated Vitest test suite covering:

  • Standard class string merging
  • Conditional class objects
  • Nested class arrays
  • null and undefined inputs
  • Boolean conditional expressions
  • Numeric values
  • Empty values and invalid inputs
  • Tailwind class conflict resolution via tailwind-merge

Test Configuration (tsconfig.app.json)

  • Added testing-related type definitions required by Vitest.
  • Updated TypeScript configuration to include project test files.
  • Ensured type safety across the test environment.

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

  • ✅ All new cn utility tests pass locally.
  • ✅ Existing project test suite passes locally.
  • ✅ No runtime regressions observed.
  • ✅ Backward compatibility maintained.

Acceptance Criteria

  • ✅ Improved TypeScript type safety for cn
  • ✅ Added edge-case unit tests
  • ✅ Graceful handling of invalid inputs
  • ✅ Updated developer documentation
  • ✅ Maintained backward compatibility

Notes for Reviewers

This change is focused exclusively on improving the safety, maintainability, and test coverage of the cn utility. The underlying implementation continues to use the existing twMerge(clsx(...)) pipeline, so no visual or behavioral changes are expected in existing components.

Copilot AI review requested due to automatic review settings June 21, 2026 14:05

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread src/utils/cn.ts Outdated
Comment thread tsconfig.app.json

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 ClassValue usage with custom StrictClassValue types and updated cn to call clsx(...inputs) and return string.
  • Added src/utils/cn.test.ts covering common cn usage patterns and Tailwind conflict resolution.
  • Expanded tsconfig.app.json to include the tests directory and added Vitest / jest-dom types; added a new package-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.

Comment thread src/utils/cn.ts Outdated
Comment thread src/utils/cn.ts Outdated
Comment thread src/utils/cn.ts Outdated
Comment thread src/utils/cn.test.ts
@sarv-tech sarv-tech force-pushed the fix-cn-typescript-safety branch from 133d7ca to 3ca96e5 Compare June 21, 2026 14:12
@sarv-tech

Copy link
Copy Markdown
Author

Hi @abhishek-nexgen-dev ,

This PR improves the TypeScript type safety of the cn utility while preserving its existing runtime behavior.

What's Included

  • Replaced permissive type structures with stricter TypeScript definitions.

  • Added comprehensive unit tests covering edge cases such as:

    • null
    • undefined
    • conditional booleans
    • numbers
    • nested arrays
    • conditional class objects
  • Improved developer documentation with detailed JSDoc comments.

  • Updated test configuration required for the new test suite.

Verification

  • All new cn utility tests pass locally.
  • Existing project tests continue to pass.
  • No breaking runtime changes were introduced.
  • Backward compatibility has been maintained.

This PR is intentionally scoped to the issue requirements and focuses only on improving type safety, test coverage, and maintainability of the cn utility.

Thank you for your review and feedback!
close #10

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.

Improve TypeScript Type Safety in Utility Function cn

2 participants