tl.cx

clsx-style conditional class joining. No conflict resolution — preserves input order, drops falsy values.

Signature

function cx(
  ...inputs: (
    | string
    | undefined
    | null
    | false
    | 0
    | Record<string, boolean>
  )[]
): string;

Examples

Conditional strings

tl.cx($.btn, isPrimary && $.primary, isDisabled && $.disabled);

Object form

tl.cx($.btn, {
  [$.primary]:  variant === "primary",
  [$.danger]:   variant === "danger",
  [$.large]:    size === "lg",
});

Mixed

tl.cx(
  "third-party-utility",          // arbitrary class string
  $.btn,                          // tl.create class
  isHover && $.hovered,           // conditional
  { [$.disabled]: !canClick },    // object form
);

When to use tl.cx vs tl.merge

tl.cx is faster (no meta map lookup). Use tl.merge when correctness depends on the last-wins semantic.

See also

• tl.merge — last-wins joining with conflict resolution
• Composition: tl.merge and tl.cx