aidenybai / aidenybai/cnfast

Expose config extension (custom classGroups) for projects with custom Tailwind theme

Aberta
#8 1 comentário 6 reações 0 responsáveis Ver no GitHub
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

Abrir o 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

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.