Expose config extension (custom classGroups) for projects with custom Tailwind theme
- Linguagem predominante
- TypeScript
- Estrelas
- 1.2k
- Forks
- 13
- Merge médio
- 14h 53min
- PRs com merge (30d)
- 7
Descrição
### Problem
`cnfast` ships with the default tailwind-merge config baked in and exposes no way to extend it. Projects that add **custom Tailwind theme utilities** (e.g. custom font sizes via `theme.extend.fontSize`) can't tell cnfast which class group those utilities belong to, so cnfast misclassifies them and produces a different result than configured `tailwind-merge`.
Concrete example — a project with custom font sizes `text-vs` / `text-xxs`:
```js
// configured tailwind-merge (extendTailwindMerge with these in the 'font-size' group):
cn('text-vs text-color-foo') // => 'text-vs text-color-foo' (size + color kept)
// cnfast 0.0.8 — treats text-vs as an arbitrary text-COLOR:
cn('text-vs text-color-foo') // => 'text-color-foo' (font size silently dropped!)
```
So any `cn()` call that combines a custom-named font size with a `text-*` color collapses them as if they conflict, dropping the size. Standard sizes (`text-sm`, etc.) are fine — only custom theme utilities are affected. This blocks adopting cnfast as a drop-in replacement in any codebase with a customized Tailwind theme.
### Why this looks easy to support
The machinery is already there internally — `src/lib/create-tailwind-merge.ts` exports a factory and the merge is built as:
```js
const createTailwindMerge = (createConfig) => { ... }
const twMerge = createTailwindMerge(getDefaultConfig)
```
with `getDefaultConfig` and (presumably) `mergeConfigs` already present. The README even notes the config is intentionally non-configurable. The ask is just to **re-expose** the existing pieces, mirroring tailwind-merge's public API, without touching the default fast-path.
### Proposed API
```ts
import { extendTailwindMerge, createTailwindMerge, getDefaultConfig } from 'cnfast'
// mirror tailwind-merge:
const twMerge = extendTailwindMerge({
extend: { classGroups: { 'font-size': ['text-vs', 'text-xxs'] } },
})
```
Optionally a `createCn(config)` factory so the optimized `cn` can be produced with a custom config too. Default `cn` / `twMerge` exports stay exactly as-is, so there's zero impact on the baked-in fast path for everyone else.
### Offer
Happy to send a PR if the direction is welcome — wanted to check appetite first given the deliberate "single, non-configurable config" design note.
Guia de contribuição
Direção de pesquisa
Start in src/lib/create-tailwind-merge.ts and inspect the existing factory, getDefaultConfig, mergeConfigs, and public exports; then read the README note about the non-configurable config. Confirm the intended API against tailwind-merge, preserve the default cn/twMerge fast path, and verify that custom font-size classGroups merge correctly without changing default behavior.
Escrita pelo modelo de indexação a partir do texto da issue.
Avaliação
- Stack de tecnologia
- tailwindcss, typescript
- Domínio
- frontend, tooling
- Tipo de issue
- Funcionalidade
- Dificuldade
- 4/5
- Tempo estimado
- 3-5 dias
- Status de atividade
- Pouca atividade
- Clareza
- Razoavelmente clara
- Facilidade para iniciantes
- 55/100