Class Utils
You can import class utility functions from jade-garden/class-utils.
cm
Conditionally combines class names, allowing for exclusion and inclusion of specific classes.
Duplicate class names are removed by default from input.
Parameters
input: the class names to change (ClassValue).options:include: class names to add toinputthat is typestringorstring[].exclude: class names to exclude frominputthat is typestringorstring[].
Examples
import { cm } from "jade-garden/class-utils";
cm("class1 class2 class3", {
include: "class4",
exclude: "class2"
});
// "class1 class3 class4"
cm(["class1", "class2", "class3"], {
include: ["class4", "class5"],
exclude: ["class2"]
});
// "class1 class3 class4 class5"
cm(["class1", "class2", "class1"], {
add: ["class2", "class3"]
});
// "class1 class2 class3"
cn
Modified version of clsx/lite.
Conditionally generates a string of class names from string arguments.
It concatenates the provided string arguments, separated by spaces, excluding any falsy values (null, undefined, '', 0, false).
Parameters
...inputs: accepts arguments that can be strings, numbers, arrays, or objects, but works with string arguments (ClassValue[]).
Examples
import { cn } from "jade-garden/class-utils";
cn("foo", "bar");
// "foo bar"
cn(true && "foo", false && "bar", "baz");
// "foo baz"
cn(false && "foo", "bar", "baz", "")
// "bar baz";
cn(["foo", "bar"]);
// ""
cn({ true: "a" }, { false: "b" });
// ""
cx
Modified version of clsx. Conditionally generates a string of class names that accepts multiple arguments of various types to build a class name string.
Parameters
...inputs: arguments can be strings, numbers, arrays, or objects (ClassValue[]).
Examples
import { cx } from "jade-garden/class-utils";
cx("foo", "bar");
// "foo bar"
cx(true && "foo", false && "bar", "baz");
// "foo baz"
cx(false && "foo", "bar", "baz", "");
// "bar baz"
cx(["foo", "bar"]);
// "foo bar"
cx(["foo", 0 && "bar", 1 && "baz"]);
// "foo baz"
cx(["foo", ["bar", ["", [["baz"]]]]]);
// "foo bar baz"
prefixes
unplugin-jade-garden.
It will not work during runtime due to how Tailwind CSS scans files.A utility to simplify the maintenance of prefixed CSS classes.
It iterates through an array of inputs, applying a base prefix to each class string.
It also supports variant-specific prefixes, allowing for different styles based on a condition (e.g., dark:has-checked:bg-indigo-950).
Parameters
prefix: The base prefix to apply to each class name that is of typestring.inputs: Anarrayof class names, which can be simplestringsorobjectsfor conditions.
Examples
import { prefixes } from "jade-garden/class-utils";
prefixes("has-checked", []);
// ""
prefixes("has-checked", ["bg-indigo-50", "text-indigo-900", "ring-indigo-200"]);
// "has-checked:bg-indigo-50 has-checked:text-indigo-900 has-checked:ring-indigo-200
prefixes(
"has-checked",
[{
condition: "dark",
classes: ["bg-indigo-950", "text-indigo-200"]
}]
);
// "dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200"
prefixes(
"has-checked",
[
"bg-indigo-50",
"text-indigo-900",
"ring-indigo-200",
{
condition: "dark",
classes: ["bg-indigo-950", "text-indigo-200", "ring-indigo-900"]
}
]
);
// "has-checked:bg-indigo-50 has-checked:text-indigo-900 has-checked:ring-indigo-200 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900"
traits
unplugin-jade-garden.
It will not work during runtime due to how Tailwind CSS scans files.A helper function to generate HTML attribute selectors for part of an anatomy.
Parameters
attributes: an object that maps HTML attribute names to their possible values.
Examples
import type { Traits } from "jade-garden";
import { traits } from "jade-garden/class-utils";
const { data }: Traits<{
data: {
disabled: boolean;
}
}> = {
data: {
disabled: {
true: "is-disabled",
false: "is-enabled"
}
}
};
traits({ data })
// "data-[disabled=true]:is-disabled data-[disabled=false]:is-enabled";