classcat

library5.0.5jsnpmunverified

Classcat is a minimalist, performant JavaScript utility for constructing HTML `class` attribute strings dynamically. It allows developers to combine strings, arrays, and objects (where keys are class names and values are booleans for conditional inclusion) into a single, space-delimited class string. The current stable version is 5.0.5, with releases occurring on an as-needed basis to address bug fixes, type improvements, and modernization efforts. Key differentiators include its small bundle size (217 B minified+gzipped), high performance (up to 2.5x faster than alternatives), and framework-agnostic nature, making it suitable for any JavaScript project, including those using React, Lit-HTML, or Mithril. Version 5.x introduced a shift to ES Modules as the primary distribution, modernizing the codebase and dropping some legacy support.

serialization web-framework

npm install classcat

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · CLASSCAT

classcat

serializationjavascriptv5.0.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

✓ import cc from 'classcat'

✗ const cc = require('classcat')

Classcat adopted ES Modules as its primary distribution method in v5.0.0. CommonJS `require()` is no longer directly supported for the main entry point, though older bundles might exist for backward compatibility.

cc (Browser Global)

✓ <script type="module"> import cc from 'https://unpkg.com/classcat@5.0.5'; </script>

✗ <script src="https://unpkg.com/classcat@5.0.5"></script> // This will expose `window.classcat` if a UMD bundle is available, but the modern approach is ESM.

For browser usage without a build step, import directly as an ES module. While older versions might have exposed a global `window.classcat`, the preferred modern approach is module-based.

This quickstart demonstrates how to use `classcat` within a functional component to conditionally apply CSS classes based on component state, showcasing its usage with objects and booleans.

import cc from 'classcat'; interface ToggleButtonProps { isOn: boolean; toggle: (newValue: boolean) => void; } // Example of a functional component (e.g., React, Preact) const ToggleButton = ({ isOn, toggle }: ToggleButtonProps) => { const circleClasses = cc({ circle: true, off: !isOn, on: isOn, }); const textClasses = cc({ textOff: !isOn, textOn: isOn, }); return ` <div class="btn" onclick="${() => toggle(!isOn)}"> <div class="${circleClasses}" /> <span class="${textClasses}">${isOn ? 'ON' : 'OFF'}</span> </div> `; }; // Example usage (simplified for demonstration) const myToggleButton = ToggleButton({ isOn: true, toggle: (value) => console.log('Toggled to', value) }); console.log(myToggleButton);

Debug

Known issues

breakingVersion 5.0.0 modernized the package to use ES Modules as its primary distribution. Projects using CommonJS `require()` will encounter errors and need to update their import statements to `import cc from 'classcat'` or configure their bundler appropriately.

fix

Migrate import statements from `const cc = require('classcat')` to `import cc from 'classcat'`. Ensure your build setup or Node.js environment supports ES Modules.

affects: >=5.0.0

breakingSupport for nested objects within the input array was removed in version 3.0.0. For example, `cc([{foo: true}, {bar: false}])` worked previously but now only `cc(['foo', 'bar'])` or `cc({foo: true, bar: false})` is intended.

fix

Refactor inputs to avoid nested objects. Flatten any complex structures into a single object or array of class names. For instance, `cc([{ one: true }, { two: true }])` should become `cc({ one: true, two: true })` or `cc(['one', 'two'])`.

affects: >=3.0.0

gotchaIn versions 5.0.4 and 5.0.5, type definitions for the default function name and supported types were corrected. Users on earlier 5.x versions might encounter TypeScript errors related to missing or incorrect typings.

fix

Upgrade to the latest `classcat` version (5.0.5 or newer) to ensure accurate and complete TypeScript type definitions.

affects: >=5.0.0 <5.0.4

gotchaVersion 2.0.0 introduced a change where keys are not added to the output string if all their child nodes evaluate to `false`. This might subtly alter output for conditional rendering logic relying on keys even when their values are falsy.

fix

Review existing code where `classcat` is used with objects that might have all falsy values. Ensure the desired behavior aligns with this change, especially if an empty string or specific class was expected when all conditions are false.

affects: >=2.0.0

Errors

Common errors & fixes

ReferenceError: require is not defined

Attempting to import `classcat` using CommonJS `require()` syntax in a modern ES Module environment, which is not supported since v5.0.0.

fix

Change your import statement from `const cc = require('classcat')` to `import cc from 'classcat'`.

Argument of type '{ foo: { bar: boolean; }; }' is not assignable to parameter of type 'string | number | object | string[]'.

Providing nested objects as input to `cc()` after version 3.0.0, which no longer supports this pattern.

fix

Flatten the input structure. Instead of `cc([{ foo: { bar: true }}])`, use `cc({ foo: true })` if 'bar' is a sub-condition, or `cc({ 'foo-bar': true })` if it's a combined class name.

Property 'cc' does not exist on type 'typeof import("classcat")'. Did you mean to access the default export with 'import cc from "classcat"'?

Incorrect TypeScript import for the default export, often happens when trying `import { cc } from 'classcat'` or similar named import patterns.

fix

Ensure you are using the correct default import syntax: `import cc from 'classcat'`.

Upgrade

Version history

5.0.5latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

12 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/jorgebucaran/classcat ↗

packagehttps://www.npmjs.com/package/classcat ↗

homepagehttps://classcat.com ↗