Zimin A.N.
9e2d985485
CRITICAL bug — на staging buttons рендерились в 16px вместо handoff workhorse 13px. UpdateBanner secondary buttons показывали invisible текст (text-ink overrode by inherited text-on-accent от parent banner). Root cause: buttonVariants base = 'rounded-md text-body font-medium ...' primary variant = 'bg-navy text-on-accent ...' tailwind-merge default config pattern-matches `text-*` как ОДНУ группу (color). Видя `text-body text-on-accent` он считал это конфликтом двух colors → keep last → text-on-accent остаётся, text-body стрипается. Result: button теряет font-size → inherit body 16px. Fix: extendTailwindMerge регистрирует наши custom semantic typography utilities (text-body/cell/mono/cap/title-*) в группе font-size (отдельной от colors). twMerge теперь знает `text-body text-on-accent` это size + color, обе сохраняются. Also: text-mono/text-cap в font-family группе (они baked Mono/Tektur) — fix конфликт с font-mono/font-display tokens если кто-то их случайно combined. Verified в preview: 'Sign in' button class теперь содержит text-body, computed fontSize: 13px (вместо 16px). Plus CI: release job image node:22-alpine → repo.nstart.cloud/library/ node:22-alpine (Docker Hub rate-limited, mirror используется во всех других jobs).
43 lines
1.7 KiB
TypeScript
43 lines
1.7 KiB
TypeScript
import { type ClassValue, clsx } from 'clsx'
|
|
import { extendTailwindMerge } from 'tailwind-merge'
|
|
|
|
/**
|
|
* Tailwind class merger — combines clsx (conditional classes) + tailwind-merge
|
|
* (resolves conflicts: e.g. `px-2 px-4` → `px-4`).
|
|
*
|
|
* Standard shadcn/ui utility, used by every primitive variant.
|
|
*
|
|
* <p>tailwind-merge по умолчанию не знает наши custom typography utilities
|
|
* (text-body, text-cell, text-mono, text-title-xl/lg/md, text-cap) — он
|
|
* pattern-matches `text-*` как color class, поэтому считал `text-body text-ink`
|
|
* конфликтом (двух color rules) и убирал первый. Результат: buttons теряли
|
|
* font-size, наследовали 16px от body.
|
|
*
|
|
* <p>extendTailwindMerge регистрирует наши utilities в группе `font-size`
|
|
* (separate от colors), и в группе `font-family` для text-mono/text-cap
|
|
* (которые baked в Mono/Tektur respectively). Теперь `text-body text-ink`
|
|
* корректно сохраняется как size + color combination.
|
|
*/
|
|
const customTwMerge = extendTailwindMerge({
|
|
extend: {
|
|
classGroups: {
|
|
'font-size': [
|
|
'text-body',
|
|
'text-cell',
|
|
'text-mono',
|
|
'text-cap',
|
|
'text-title-xl',
|
|
'text-title-lg',
|
|
'text-title-md',
|
|
],
|
|
// text-mono / text-cap baked font-family. Регистрируем отдельной группой
|
|
// чтобы конфликтовали с `font-mono` / `font-display` корректно.
|
|
'font-family': ['text-mono', 'text-cap'],
|
|
},
|
|
},
|
|
})
|
|
|
|
export function cn(...inputs: ClassValue[]) {
|
|
return customTwMerge(clsx(inputs))
|
|
}
|