{"id":10635,"library":"classix","title":"Classix","description":"classix is a highly optimized utility for conditionally joining CSS class names, focusing on speed and minimal bundle size. It distinguishes itself by exclusively accepting string expressions as arguments, diverging from common patterns in libraries like `clsx` and `classnames` which often support object syntax. This design choice simplifies the API, improves typing experience, and enables better performance and a smaller footprint. The current stable version is 2.2.12. The project maintains a frequent release cadence, primarily issuing patch updates for dependency upgrades and minor improvements, as seen in the recent changelog. It supports both ES Modules and CommonJS environments across all major browsers and Node.js versions, provides full TypeScript typing, and has zero runtime dependencies.","status":"active","version":"2.2.12","language":"javascript","source_language":"en","source_url":"https://github.com/alexnault/classix","tags":["javascript","class","classes","classname","classnames","clsx","tailwind","css","typescript"],"install":[{"cmd":"npm install classix","lang":"bash","label":"npm"},{"cmd":"yarn add classix","lang":"bash","label":"yarn"},{"cmd":"pnpm add classix","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary export is a default export, though a named export also exists for `cx`.","wrong":"import { cx } from 'classix'","symbol":"cx","correct":"import cx from 'classix'"},{"note":"Both default and named exports for `cx` are supported and commonly used.","wrong":"import cx from 'classix'","symbol":"cx","correct":"import { cx } from 'classix'"},{"note":"CommonJS require style for Node.js environments. Classix is fully compatible with both CJS and ESM.","symbol":"cx","correct":"const cx = require('classix')"}],"quickstart":{"code":"import cx from \"classix\";\n\nconst isPrimary = true;\nconst isLarge = false;\n\n// Basic usage: join multiple string arguments\nconsole.log(cx(\"class1\", \"class2\"));\n// Expected output: \"class1 class2\"\n\n// Conditional class application using boolean logic\nconsole.log(cx(\"base-class\", true && \"active-class\"));\n// Expected output: \"base-class active-class\"\n\n// Ternary operator for if-else class logic\nconsole.log(cx(isPrimary ? \"bg-primary-100\" : \"bg-secondary-100\"));\n// Expected output: \"bg-primary-100\"\n\n// Combining static classes with multiple conditional expressions\nconst result = cx(\n  \"flex\",\n  isPrimary ? \"bg-primary-100\" : \"bg-secondary-100\",\n  isLarge ? \"m-4 p-4\" : \"m-2 p-2\"\n);\nconsole.log(result);\n// Assuming isPrimary is true and isLarge is false:\n// Expected output: \"flex bg-primary-100 m-2 p-2\"","lang":"typescript","description":"Demonstrates basic class joining, conditional class application, and ternary operator usage for 'if/else' logic with `classix`."},"warnings":[{"fix":"Convert object syntax `{'class-name': condition}` to conditional string expressions like `condition && 'class-name'` or `condition ? 'class-name-if-true' : 'class-name-if-false'`.","message":"When migrating from libraries like `clsx` or `classnames`, object-based arguments for conditional classes (e.g., `{ 'class-name': boolean }`) are not supported. This is a fundamental design choice in classix for performance and API simplicity.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure all arguments passed to `cx` resolve to a string, boolean, null, or undefined. Use conditional string logic instead of object or array patterns found in other libraries.","message":"Classix is designed to work solely with string expressions, boolean values, and falsy types. Passing other complex types like arrays or objects directly (apart from how they might be stringified) will lead to unexpected results or compilation errors.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Rewrite object-based conditional classes using string expressions. For example, change `cx({ 'class-name': condition })` to `cx(condition && 'class-name')`.","cause":"Attempting to pass an object literal to the `cx` function in a TypeScript project, which is explicitly not supported by classix's API.","error":"Argument of type '{ \"class-name\": boolean; }' is not assignable to parameter of type 'string | boolean | null | undefined | number'."},{"fix":"Refactor object-based class definitions to use conditional string expressions. Instead of `cx({'my-class': someCondition})`, use `cx(someCondition && 'my-class')`.","cause":"Passing an object literal to `cx` in a JavaScript environment. The object is implicitly coerced into the string `[object Object]` instead of its keys being evaluated as class names.","error":"Unexpected output containing '[object Object]'"}],"ecosystem":"npm"}