A utility for building CSS expressions like
calc,clamp, etc.
deno add @dldc/css-builderThis library provides builder functions to construct CSS math expressions and a
serialize function to convert them to CSS strings.
import { add, clamp, multiply, serialize } from "@dldc/css-builder";
// Build a calc expression
const result = add("10px", multiply(2, "5px"));
serialize(result); // "calc(10px + 2*5px)"
// Build a clamp expression
const responsive = clamp("10px", "5vw", "100px");
serialize(responsive); // "clamp(10px,5vw,100px)"All builder functions accept numbers, strings (like "10px", "50%",
"var(--size)"), or other expressions.
Creates a calc() addition expression.
serialize(add(10, 20, 30)); // "calc(10 + 20 + 30)"
serialize(add("10px", "2rem")); // "calc(10px + 2rem)"Creates a calc() subtraction expression.
serialize(subtract(100, 20, 10)); // "calc(100 - 20 - 10)"
serialize(subtract("100%", "20px")); // "calc(100% - 20px)"Creates a calc() multiplication expression.
serialize(multiply(2, 3, 4)); // "calc(2*3*4)"
serialize(multiply("10px", 2)); // "calc(10px*2)"Creates a calc() division expression.
serialize(divide(100, 2, 5)); // "calc(100/2/5)"
serialize(divide("100%", 3)); // "calc(100%/3)"Creates a min() expression.
serialize(min(10, "20px", "50%")); // "min(10,20px,50%)"Creates a max() expression.
serialize(max(10, "20px", "50%")); // "max(10,20px,50%)"Creates a clamp() expression. Use "none" for unbounded min or max.
serialize(clamp(10, "50%", "100px")); // "clamp(10,50%,100px)"
serialize(clamp("none", "50%", "none")); // "clamp(none,50%,none)"Creates an exp() expression.
serialize(exp(2)); // "exp(2)"
serialize(exp("2.5")); // "exp(2.5)"Creates a pow() expression.
serialize(pow(2, 3)); // "pow(2,3)"
serialize(pow("var(--base)", "2")); // "pow(var(--base),2)"Creates a var() expression for CSS custom properties.
import { add, var as cssVar } from "@dldc/css-builder";
serialize(cssVar("--space")); // "var(--space)"
serialize(cssVar("--gutter", add("8px", 2))); // "var(--gutter,8px + 2)"Creates a numeric calc value.
serialize(number(42)); // "42"
serialize(number("3.14")); // "3.14"Creates a dimension calc value.
serialize(dimension(10, "px")); // "10px"
serialize(dimension("1.5", "rem")); // "1.5rem"Creates a percentage calc value.
serialize(percentage(50)); // "50%"
serialize(percentage("12.5")); // "12.5%"Creates a raw calc value (no parsing).
serialize(raw("var(--size)")); // "var(--size)"Wraps a value or sum in parentheses, useful for preserving precedence in composed expressions.
serialize(group(value("10px"))); // "(10px)"Creates a round() expression. You can pass a rounding strategy as the first
argument or omit it to use the default nearest strategy.
serialize(round(null, "var(--width)", "50px")); // "round(var(--width),50px)"
serialize(round("up", "101px", "var(--interval)")); // "round(up,101px,var(--interval))"
serialize(round("down", "10.5px")); // "round(down,10.5px)"Convenience helpers are also available:
serialize(roundNearest("2.4px", "1px")); // "round(nearest,2.4px,1px)"
serialize(roundUp("101px", "5px")); // "round(up,101px,5px)"
serialize(roundDown("var(--height)", "8px")); // "round(down,var(--height),8px)"
serialize(roundToZero("-105px", 10)); // "round(to-zero,-105px,10)"Builder functions can be composed together:
const result = add("10px", multiply(2, "5vw"), clamp(0, "20%", "50px"));
serialize(result);
// "calc(10px + 2*5vw + clamp(0,20%,50px))"Converts an expression to a CSS string.
const expr = multiply(add(10, 20), 2);
const css = serialize(expr); // "calc((10 + 20)*2)"Serializes an expression when it is defined. Returns undefined for null or
undefined inputs.
const css = maybeSerialize(add("10px", "5px")); // "calc(10px + 5px)"
const optionalCss = maybeSerialize(undefined); // undefinedThis library currently includes only the CSS functions and features that I personally needed. If you need additional CSS math functions or features, feel free to open an issue or submit a pull request - contributions are welcome!