vanilla-classnames


vanilla-classnames (short to vcn) is better version
of classnames
for vanilla-extract.

Installation

``
yarn add vanilla-classnames

npm install vanilla-classnames
`

Usage

There is codesandbox example

`ts
// styles.css.ts
import { style, composeStyles } from '@vanilla-extract/css'
import { vcn } from 'vanilla-classnames'

export const item = vcn(style({
//first, some base styles (it can be omitted)
background: 'blue',
}), {
//and then, dynamic variants
active: style({
background: 'green',
}),

//if pass array from two classes, then
disabled: [
//first will be applied on truthy condition
style({
background: 'none',
color: 'gray',
}),
//and second - for falsy or omitted condition
style({
cursor: 'pointer',
}),
],
})
`

`tsx
import React from 'react'
import * as S from './styles.css'

const SomeItem: React.FC<{active?: boolean, disabled?: boolean}> = ({active, disabled}) => <>




`

That's all, folks!
Of course, item` function will suggest variants names in typescript.