tw-merge for mastercss

[dawidseipold]

Are there any plans for creating a package that would merge all repeating classes or repeating classes of the same type?
For example if I have:

let disabled = true
const classes = cn('bg:red fg:blue', { 'bg:gray': disabled })

The output would be fg:blue bg:gray, meaning that the repeating class gets overwritten and remove from the output cleaning up the class list.

[1aron]

No plans yet. For now, I suggest using styled (https://github.com/master-co/styled) to accurately manage all variants.

import cv from 'class-variant'

const btn = cv(
    'inline-flex rounded',
    {
        intent: {
            primary: 'bg:blue fg:white bg:blue-60:hover',
            secondary: 'bg:white fg:slate-30 bg:slate-90:hover',
        },
        size: {
            sm: 'text:14 p:5|15',
            md: 'text:16 p:10|25'
        }
    },
    ['uppercase', { intent: 'primary', size: 'md' }],
    ({ indent, size }) => indent && size && 'font:semibold'
)

btn.default = {
    intent: 'primary',
    size: 'sm'
}

const classes = btn()
// inline-flex rounded bg:blue fg:white bg:blue-55:hover text:14 p:5|8 font:semibold

const classes = btn({ indent: 'secondary', size: 'sm' })
// inline-flex rounded bg:white fg:slate-30 bg:slate-90:hover text:14 p:5|8 font:semibold

const classes = btn({ indent: 'primary', size: 'md' })
// inline-flex rounded bg:blue fg:white bg:blue-55:hover text:16 p:10|25 uppercase font:semibold