clazzx

Introduction

ClazzX is a small typesafe utility library for composing HTML classes. Unlike Vanilla Extract, Stitches, or CVA (all fantastic options) ClazzX takes a different approach, using state rather than variants to compose styles.

The classic approach is to create a series of variants that can be selected:

className={myButton({size: "small", intent="primary"})}
// AND
<Button size="small" intent="primary" />

In comparison, ClazzX models combinations of styles based on state.

className={MyButton.c({small: true, primary: true})}
// AND
<Button small primary />

This simplifies the logic of tying the styling of a component to complex state. Instead of a series of nested ternary operators, simple logical operators can be used to clearly define the appropriate styles.

className={MyButton.c({ 
	primary: true,
	loading: isLoading,
	error: isError 
})}
//AND
<Button primary loading={isLoading} error={isError}>

// Versus the traditional variant approach

className={myButton({
intent: isLoading ? "loading" 
: isError ? "error" 
: "primary"
})}
// AND
<Button intent={isLoading ? "loading" : isError ? "error" : "primary"}>

Installation

// Deno
import { ClazzX, clx } from "https://deno.land/x/clazzx/mod.ts"

// NPM
npm i clazzx

// Yarn
yarn add clazzx

Getting Started

A basic component

import { ClazzX } from 'clazzx'

class Input extends ClazzX {
	// the base class will always be applied
	base = "border rounded-md font-sans"

	small = "px-2 py-1 text-sm"
	md = "px-3 py-2 text-base"
	lg = "px-4 py-3 text-lg"

	// you can use both strings and string arrays freely
	primary = [
		"bg-primary",
		"border-primary-dark",
		"text-primary-content"
	]
	secondary = [
		"bg-secondary",
		"border-secondary-dark",
		"text-secondary-content"
	]
}

function MyCustomComponent(){
	return <input className={Input.c({ md: true, secondary: true })}/>
}

Default Classes

You can set default classes that are applied if nothing is passed to the classes method.

default = [this.md, this.secondary, "hover:scale-105"]

Compounds

If you want to conditionally apply styles when two or more states are true, you can create compound states.

compounds = [{
	state: ["primary", "large"],
	classes: "shadow-md"
}]

Ordering

Classes are applied in the order of the states.

className={btn.classes({rounded: true, square: true})}
// className="border-md border-none"
<Button primary secondary small medium>
// className="bg-primary bg-secondary text-sm text-md"

The order of classes works like this:

• base
• ...order based on state || default classes
• Compounds

StyleProps

StyleProps is an exported type that gives you access to the parameters of the style class. You can use this to strongly type components.

function MyButton({...props}: StyleProps<MyStyleClass>){}

Clx

clx is a variadic utility function that composes a string based on it's truthy inputs.

const a = clx(["bg-green-300", "text-md"])
// "bg-green-300 text-md"

const b = clx("bg-red-300", false && "text-red-700")
// "bg-red-300"

const c = clx(["p-4", false && "mt4"], "text-black", true && "font-bold")
// "p-4 text-black font-bold"

It can be imported or used as a static method on ClazzX.

Accessing fields

Each ClazzX instance exposes a static get() method to access the fields and methods of the class.

Examples

React Link

import { Style, StyleProps } from "clazzx"

class LinkStyles extends ClazzX {
	base: "font-link no-underline transition duration-200"

	primary: "text-link hover:text-link-hover"
	secondary: "text-secondary hover:text-secondary-hover"
	active: "text-active hover:text-active-hover underline"

	default = this.primary
}

interface Link {
	children: ReactNode 
	props: StyleProps<LinkStyles> & HTMLAttributes<HTMLAnchorElement>
}

function Link({children, ...props}: Link){
	return <a {...props} className={LinkStyles.c({...props})}>{children}</a>
}

function App(){
	const router = useRouter()
	// ...
	return (
		// ...
		<Link href="/about" secondary active={router.isCurrentPage}>
			My Link
		</Link>
		// ...
	)
}

With Globals

class GlobalStyles extends ClazzX {
	padding = {
		sm: "p-2",
		md: "p-4",
		lg: "p-6",
		dynamic: (i: number) => {
			`p-[${i*2}px]`
		}
	}
}

class Input extends GlobalStyles {
	sm = clx(this.padding.sm, "rounded-sm")
	md = clx(this.padding.md, "rounded-md")
	lg = clx(this.padding.lg, "rounded-lg")

	warning = "outline-red"

	compounds = [{
		state: ["sm", "warning"],
		classes: this.padding.dynamic(8)
	}]
}