class-c
Chainable class name helper with first class CSS Module support
Installation
$ npm install class-c
Usage
Basic
c
uses the tagged template syntax
import c from "class-c";
c`a b`;
c` a b `;
c`
a
b
`;
c("a b");
Chaining
You can chain as many scopes as you'd like
c`a`.c`b c`.c`d`;
const styles = {
a: "scoped-a",
b: "scoped-b",
};
c(styles)`a b`.c`a b`;
Conditionals
Falsey values will be omitted, condition-by-class mapping is also supported. This can be useful with object shorthand. This also supports function conditions.
c`a ${condition && b}`;
c`a ${{ b: false, c: true }}`;
const focused = true;
const highlighted = false;
const open = true;
c`${{ focused, highlighted, open }}`;
const focused = () => true;
const highlighted = () => false;
const open = () => true;
c`${{ focused, highlighted, open }}`;
CSS Modules
Calling c
with a styles object will create a scoped context
const styles = {
a: "scoped-a",
b: "scoped-b",
};
c(styles)`a b`;
Chaining
Chaining will reset context which can be useful for forwarding classes
c(styles)`a b`.c`a b`;
const someExternalClasses = "external-a external-b";
c(styles)`a b`.c(someExternalClasses);
Many references
If you need to use a context in many places, it can be convenient to make a new helper
const cs = c(styles);
cs`a`;
cs`b`.c`c`;
Multiple modules/styles objects
const otherStyles = {
a: "other-a",
b: "other-b",
};
c(styles)`a b`.c(otherStyles)`a b`;
c(styles)`a nonexistant b`;
Prefixing and suffixing
const styles = {
variant_a: "scoped-variant_a",
variant_b: "scoped-variant_b",
};
const variant: "a" | "b" = "a";
c(styles)`variant_${variant}`;
const suffixStyles = {
a_suffix: "scoped-a_suffix",
b_suffix: "scoped-b_suffix",
};
c(suffixStyles)`${variant}_suffix`;