vanilla-classnames

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

// 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',
    }),
  ],
})

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

const SomeItem: React.FC<{active?: boolean, disabled?: boolean}> = ({active, disabled}) => <>
  <div className={S.item({active, disabled})}>
    Styled div!
  </div>
</>

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