Merge branch 'fix/tailwind-merge-custom-utilities' into 'main'
fix(ui): tailwind-merge config + CI image mirror See merge request 2-6/2-6-4/terravault/ordinis!57
This commit is contained in:
+1
-1
@@ -393,7 +393,7 @@ trigger-deploy-prod:
|
|||||||
# `[skip release]` и semantic-release пропустит этот commit (см. parserOpts).
|
# `[skip release]` и semantic-release пропустит этот commit (см. parserOpts).
|
||||||
release:
|
release:
|
||||||
stage: release
|
stage: release
|
||||||
image: node:22-alpine
|
image: repo.nstart.cloud/library/node:22-alpine
|
||||||
needs:
|
needs:
|
||||||
- job: trigger-deploy-staging
|
- job: trigger-deploy-staging
|
||||||
artifacts: false
|
artifacts: false
|
||||||
|
|||||||
@@ -1,12 +1,42 @@
|
|||||||
import { type ClassValue, clsx } from 'clsx'
|
import { type ClassValue, clsx } from 'clsx'
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { extendTailwindMerge } from 'tailwind-merge'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Tailwind class merger — combines clsx (conditional classes) + tailwind-merge
|
* Tailwind class merger — combines clsx (conditional classes) + tailwind-merge
|
||||||
* (resolves conflicts: e.g. `px-2 px-4` → `px-4`).
|
* (resolves conflicts: e.g. `px-2 px-4` → `px-4`).
|
||||||
*
|
*
|
||||||
* Standard shadcn/ui utility, used by every primitive variant.
|
* 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[]) {
|
export function cn(...inputs: ClassValue[]) {
|
||||||
return twMerge(clsx(inputs))
|
return customTwMerge(clsx(inputs))
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user