Added array for false condition class, 0.1.0

README.md

@@ -23,24 +23,26 @@ import { style, composeStyles } from '@vanilla-extract/css'
 import { vcn } from 'vanilla-classnames'
 
 export const item = vcn(style({
-  //first, some base styles (but it can be omitted)
+  //first, some base styles (it can be omitted)
   background: 'blue',
-  cursor: 'pointer',
 }), {
   //and then, dynamic variants
   active: style({
     background: 'green',
   }),
-  //for composing multiply styles, use vanilla composeStyles
-  disabled: composeStyles(
+
+  //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: 'default',
+      cursor: 'pointer',
     }),
-  ),
+  ],
 })
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-classnames",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Better classnames utility for vanilla-extract",
   "keywords": [
     "css",

src/vcn.ts

@@ -1,16 +1,36 @@
-type Rec = Record<string, string>
+type E = string | [string, string]
+type Rec = Record<string, E>
 export type Selector<T extends Rec> = (vars?: Partial<Record<keyof T, unknown>>) => string
 
 export function vcn<T extends Rec>(variants: T): Selector<T>
 export function vcn<T extends Rec>(baseCn: string, variants: T): Selector<T>
 export function vcn<T extends Rec>(...args: [T] | [string, T]): Selector<T> {
   const baseCn = args.length === 1 ? '' : args[0]
   const variants = args.length === 1 ? args[0] : args[1]
+
+  let neededKeys: Partial<Record<keyof T, false>> = {}
+
+  for (const key in variants) {
+    const v: E = variants[key]
+    if (typeof v !== 'string') {
+      neededKeys[key] = false
+    }
+  }
+
   const f: Selector<T> = (vars = {}) => {
+    for (const k in neededKeys) {
+      if (!(k in vars)) {
+        vars[k] = false
+      }
+    }
+
     let res = baseCn
     for (const key in vars) {
+      const v: E = variants[key]
       if (vars[key]) {
-        res += (res ? ' ' : '') + variants[key]
+        res += (res ? ' ' : '') + (typeof v === 'string' ? v : v[0])
+      } else if (typeof v !== 'string') {
+        res += (res ? ' ' : '') + v[1]
       }
     }
     return res

test/vcn.test.ts

@@ -32,3 +32,24 @@ describe('short form', () => {
     expect(t({ active: 0, someClass: 1 })).toBe('s')
   })
 })
+
+describe('with array', () => {
+  it('works', () => {
+    const t = vcn({
+      root: 'r',
+      active: ['a', 'i']
+    })
+    expect(t()).toBe('i')
+    expect(t({ active: 1 })).toBe('a')
+    expect(t({ active: 0 })).toBe('i')
+    expect(t({ active: 0, root: 0 })).toBe('i')
+    expect(t({ active: 0, root: 1 })).toBe('i r')
+    expect(t({ active: 1, root: 0 })).toBe('a')
+    expect(t({ active: 1, root: 1 })).toBe('a r')
+    expect(t({ root: 0, active: 0 })).toBe('i')
+    expect(t({ root: 0, active: 1 })).toBe('a')
+    expect(t({ root: 1, active: 0 })).toBe('r i')
+    expect(t({ root: 1, active: 1 })).toBe('r a')
+    expect(t({ root: 1 })).toBe('r i')
+  })
+})