Nonstop Progressive Marxism

    vanilla-classnames
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    vanilla-classnames

    NPM version NPM Weekly Downloads License

    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.

    Install

    npm i vanilla-classnames

    DownloadsWeekly Downloads

    41

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    17.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • amareis