@asyarb/twix

twix 🍫

twix is a small utility for constructing classnames using a variant based api. The API is largely copied from stitches but works with just plain class strings instead.

Installation

twix has a peer dependency on clsx, a small utility for conditionally toggling class names.

npm i @asyarb/twix clsx

Example Usage

const button = twix({
	base: "rounded",

	variants: {
		color: {
			purple: "bg-purple",
			blue: "bg-blue",
		},
		size: {
			small: "p-5",
			large: "p-8",
		},
	},

	compoundVariants: [
		{
			color: "purple",
			size: "small",
			class: "font-bold",
		},
	],

	defaultVariants: {
		size: "large",
	},
})

// => "rounded p-8 bg-purple"
button({ color: "purple" })

// => "rounded p-5 bg-purple font-bold"
button({ color: "purple", size: "small" })

TypeScript

twix is written in TypeScript, and provides type-safety when defining and using your variants.

import type { GetVariants } from "@asyarb/twix"

// ... Same button from above.

// => TypeScript error - Variants must be provided.
button()

// => TypeScript error - Must provide `color` since no defaultVariant exists.
button({ size: "small" })

// => Get variants as a type you can re-use elsewhere:
/**
 * { color: 'purple' | 'blue', size?: 'small' | 'large' }
 */
type ButtonVariants = GetVariants<typeof button>

Additional classes

The function returned from twix can also append arbitrary classes if desired.

// ... Same button from above.

// => "rounded p-5 bg-purple font-bold arbitrary"
button({ color: "purple", size: "small", class: "arbitrary" })

React usage

// components/Button.tsx

import { GetVariants, twix } from "@asyarb/twix"

const button = twix({
	/** Same example from above... */
})

type ButtonProps = {
	/** Userland props... */
} & GetVariants<typeof button>

const Button = ({ color, size, ...props }: ButtonProps) => {
	return <button className={button({ color, size })} {...props} />
}

Changelog

0.1.4 (2022-04-13)

Features

• allow arbitrary classes via class property (9b13c2e)