cls

src/dom/cls.ts

@@ -0,0 +1,15 @@
+/**
+ * Returns a string with all the classes passed as arguments
+ * Useful to compose classes in jsx
+ *
+ * @param classes: List of classes
+ * @returns string
+ * @example
+ *
+ *    cls("a", "b") // "a b"
+ *    cls(false && "a", "b") // "b"
+ *
+ */
+export function cls(...classes: (boolean | string)[]): string {
+  return classes?.filter(Boolean).join(" ")
+}

src/index.ts

@@ -2,6 +2,7 @@
 export { shuffleArray } from "./array/shuffleArray"
 // dom
 export { getCssVariable } from "./dom/getCssVariable"
+export { cls } from "./dom/cls"
 // envs
 export * from "./envs/envs"
 // maths

tests/dom/cls.test.ts

@@ -0,0 +1,23 @@
+import { describe, it, expect } from "vitest"
+import { cls } from "../../src/dom/cls"
+
+describe("cls", () => {
+  it("should compose cls list", () => {
+    // simple
+    expect(cls("a", "b")).toBe("a b")
+
+    // with boolean
+    expect(cls(false && "a", "b")).toBe("b")
+    expect(cls(true && "foo", true && "bar")).toBe("foo bar")
+    expect(cls(false && "foo", true && "bar")).toBe("bar")
+
+    // ternary operator
+    expect(cls(false ? "foo" : "voo", true && "bar")).toBe("voo bar")
+
+    // return empty string if no cls
+    expect(cls(false)).toBe("")
+    expect(cls(false && "foo")).toBe("")
+    expect(cls(undefined)).toBe("")
+    expect(cls(null)).toBe("")
+  })
+})