diff --git a/src/components/alert/index.tsx b/src/components/alert/index.tsx index 32c435b1..1f5fbb2e 100644 --- a/src/components/alert/index.tsx +++ b/src/components/alert/index.tsx @@ -53,7 +53,7 @@ export const Alert: FC = ({ className, title, variant = 'info', stic > diff --git a/src/lib/utils.ts b/src/lib/utils.ts index fed2fe91..860b9630 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -1,6 +1,30 @@ -import { clsx, type ClassValue } from 'clsx' +import { clsx } from 'clsx' import { twMerge } from 'tailwind-merge' -export function cn(...inputs: ClassValue[]) { +// Stricter than `ClassValue` from clsx +export type ClassValueStrict = ClassArrayStrict | ClassDictionaryStrict | string | null | false | undefined +export type ClassDictionaryStrict = Record +export type ClassArrayStrict = ClassValueStrict[] + +export function cn(...inputs: ClassValueStrict[]) { return twMerge(clsx(inputs)) } + +{ + // Type-only test: + const condition = false + // `clsx` is not strict enough + clsx('class1', 2, condition && 'no3', { class4: true, class5: 5, class6: [{ why: '?' }] }) + // @ts-expect-error `cn` should be stricter and disallow this + cn('class1', 2, condition && 'no3', { class4: true, class5: 5, class6: [{ why: '?' }] }) + // @ts-expect-error `cn` should be stricter and disallow this + cn('class1', 2) + // @ts-expect-error `cn` should be stricter and disallow this + cn('class1', true, 'class3') + // @ts-expect-error `cn` should be stricter and disallow this + cn('class1', { class5: 5 }) + // @ts-expect-error `cn` should be stricter and disallow this + cn('class1', { class6: [{ why: '?' }] }) + // Valid + cn('class1', condition && 'no3', { class4: true }) +}