🎨 𝒌𝒍𝒔𝒙

A simple replacement for clsx you may not actually need (see the benchmark)

Used to construct class conditionally with strings, arrays and key-value objects.

Developed as a case study, Bun friendly. 🌿

Features

• 🚀 Unnecessarily fast (~20M ops/s)
• 🎯 Same functionality and API of clsx
• 👑 Modern ESM syntax
• 💎 Zero dependencies
• ☀️ No "lite" mode (simply doesn't make any sense)
• 🎈 Only 277B (~190B compressed)
• 🐳 Deeply typed and tested
• 🚨 Experimental WASM variant (for research purposes, do not use it)

Installation

bun add klsx

or with npm:

npm install klsx

Quick Start

import { klsx } from 'klsx'

klsx('foo', 'bar', 'baz')
// => "foo bar baz"

klsx({ foo: 'string', bar: true, bux: null }, 'baz')
// => "foo bar baz"

klsx(['foo', ['bar', true && 'baz']])
// => "foo bar baz"

or importing the short alias kx:

React

import React, { useState } from 'react'
import { kx } from 'klsx'

const MyComponent = () => {
  const [isActive, setIsActive] = useState(false)
  return (
    <div>
      <div className={kx('base-class', isActive ? 'active' : 'inactive')}>
        {/* ... */}
      </div>

      <div className={kx('base-class', { active: isActive, inactive: !isActive })}>
        {/* ... */}
      </div>

      <div
        className={kx('base-class', [isActive && 'active', !isActive && 'inactive'])}
      >
        {/* ... */}
      </div>
    </div>
  )
}

Migrate from clsx

Just replace every c with a k, as in the example below.

From:

// clsx

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

To:

// KLSX

import { klsx, type KlassValue } from 'klsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: KlassValue[]) {
  return twMerge(klsx(inputs))
}

Integrations

Tailwind CSS

Visual Studio Code

1. Install the Tailwind CSS IntelliSense extension:

code --install-extension bradlc.vscode-tailwindcss

2. Update your settings.json configuration with:

{
  "tailwindCSS.classFunctions": ["klsx", "kx"]
}

Prettier

1. Install the prettier-plugin-tailwindcss plugin:

bun add -D prettier prettier-plugin-tailwindcss

2. Update your prettier.config.js configuration to handle klsx:

/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
export default {
  plugins: ['prettier-plugin-tailwindcss'],
  tailwindFunctions: ['klsx', 'kx'],
}

ESLint

1. Install the eslint-plugin-clsx plugin:

bun add -D eslint eslint-plugin-clsx

2. Update your eslint.config.js configuration to handle klsx:

import { defineConfig } from 'eslint/config'
import clsx from 'eslint-plugin-clsx'

export default defineConfig({
  plugins: { clsx },
  settings: {
    clsxOptions: {
      klsx: ['default', 'klsx', 'kx'],
    },
  },
})

Development

Install dependencies:

bun install

Build dist files:

bun run build

Testing

Run test suite:

bun test

Run benchmark suite:

bun bench