Every CSS function that mdn-data has a grammar for is a member of css and a named import, camelCased: calc, min, clamp, round, sin, rgb, oklch, colorMix, lightDark, linearGradient, cubicBezier, steps, translateX, url, env, var, ... 110 of them (bun run extract writes the list from mdn-data/css/functions.json and the name() grammars of mdn-data's syntaxes, bun run members the types). A call takes parts: a token, a number, a string, another call, or an array of those joined by a space ([t.color.bg, "25%"], a colour stop). It is computed at build time, checked against the grammar of its function by the twin, and replaced by its text: nothing ships. What it returns is a Typed OM value of the function's type, a part of any property that takes one.
import * as import csscss from "cssints" with { type: "cssints" };
const const t: css.Tokens<{
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}, undefined, {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
import csscss.const createTokens: <{
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>(tokens: {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
} & ValidGroup<...>, name?: (path: readonly string[]) => string | TokenName) => css.Tokens<...>
color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
} & ValidGroup<{
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
}, "color", {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
$type: "color"$type: "color", accent: {
readonly $value: "oklch(62% 0.19 259)";
}
$value: "oklch(62% 0.19 259)"$value: "oklch(62% 0.19 259)" }, bg: {
readonly $value: "white";
}
$value: "white"$value: "white" } },
space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
} & ValidGroup<{
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
}, "dimension", {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
$type: "dimension"$type: "dimension", sm: {
readonly $value: "8px";
}
$value: "8px"$value: "8px" }, md: {
readonly $value: "16px";
}
$value: "16px"$value: "16px" } },
time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
} & ValidGroup<{
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
}, "duration", {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
$type: "duration"$type: "duration", fast: {
readonly $value: "100ms";
}
$value: "100ms"$value: "100ms" } },
});
export const const a: css.Stylea = import csscss.const width: <readonly [css.CSSStyleValue<"length">]>(parts_0: css.CSSStyleValue<"length">) => css.Style`auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/width)width(import csscss.const calc: <readonly [Token<"length", true, "16px">, "*", 2]>(parts_0: Token<"length", true, "16px">, parts_1: "*", parts_2: 2) => css.CSSStyleValue<"length">`calc( <calc-sum> )`. Chrome 26, Edge 12, Firefox 16, Safari 7, iOS 7, Android 28. [MDN](https://developer.mozilla.org/docs/Web/CSS/calc)calc(const t: css.Tokens<{
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}, undefined, {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
space: css.Tokens<{
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
}, "dimension", {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
md: Token<"length", true, "16px">md, "*", 2)); // width: calc(var(--space-md) * 2)
export const const b: css.Styleb = import csscss.const padding: <readonly [css.CSSStyleValue<"length">]>(parts_0: css.CSSStyleValue<"length">) => css.Style`<'padding-top'>{1,4}`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/padding)padding(import csscss.const calc: <readonly ["1rem", "+", 2, "*", Token<"length", true, "16px">]>(parts_0: "1rem", parts_1: "+", parts_2: 2, parts_3: "*", parts_4: Token<"length", true, "16px">) => css.CSSStyleValue<"length">`calc( <calc-sum> )`. Chrome 26, Edge 12, Firefox 16, Safari 7, iOS 7, Android 28. [MDN](https://developer.mozilla.org/docs/Web/CSS/calc)calc("1rem", "+", 2, "*", const t: css.Tokens<{
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}, undefined, {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
space: css.Tokens<{
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
}, "dimension", {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
md: Token<"length", true, "16px">md)); // padding: calc(1rem + 2 * var(--space-md))
export const const c: css.Stylec = import csscss.const padding: <readonly [css.CSSStyleValue<"length">]>(parts_0: css.CSSStyleValue<"length">) => css.Style`<'padding-top'>{1,4}`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/padding)padding(import csscss.const clamp: <readonly [Token<"length", true, "16px">, "2vw", "2rem"]>(parts_0: Token<"length", true, "16px">, parts_1: "2vw", parts_2: "2rem") => css.CSSStyleValue<"length">`clamp( <calc-sum>#{3} )`. Chrome 79, Edge 79, Firefox 75, Safari 13.1, iOS 13.4, Android 79. [MDN](https://developer.mozilla.org/docs/Web/CSS/clamp)clamp(const t: css.Tokens<{
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}, undefined, {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
space: css.Tokens<{
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
}, "dimension", {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
md: Token<"length", true, "16px">md, "2vw", "2rem")); // padding: clamp(var(--space-md), 2vw, 2rem)
export const const d: css.Styled = import csscss.const maxWidth: <readonly [css.CSSStyleValue<"length" | "percentage">]>(parts_0: css.CSSStyleValue<"length" | "percentage">) => css.Style`none | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/max-width)maxWidth(import csscss.const min: <readonly ["48rem", "100%"]>(parts_0: "48rem", parts_1: "100%") => css.CSSStyleValue<"length" | "percentage">`min( <calc-sum># )`. Chrome 79, Edge 79, Firefox 75, Safari 11.1, iOS 11.3, Android 79. [MDN](https://developer.mozilla.org/docs/Web/CSS/min)min("48rem", "100%"));
export const const e: css.Stylee = import csscss.const color: <readonly [css.CSSStyleValue<"light-dark()">]>(parts_0: css.CSSStyleValue<"light-dark()">) => css.Style`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/color)color(import csscss.const lightDark: <readonly ["white", Token<"color", true, "white">]>(parts_0: "white", parts_1: Token<"color", true, "white">) => css.CSSStyleValue<"light-dark()">`light-dark( <color>, <color> )`. Chrome 123, Edge 123, Firefox 120, Safari 17.5, iOS 17.5, Android 123. [MDN](https://developer.mozilla.org/docs/Web/CSS/color_value/light-dark)lightDark("white", const t: css.Tokens<{
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}, undefined, {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
color: css.Tokens<{
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
}, "color", {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
bg: Token<"color", true, "white">bg)); // color: light-dark(white, var(--color-bg))
export const const f: css.Stylef = import csscss.const color: <readonly [css.CSSStyleValue<"color-mix()">]>(parts_0: css.CSSStyleValue<"color-mix()">) => css.Style`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/color)color(import csscss.const colorMix: <readonly ["in oklab", Token<"color", true, "oklch(62% 0.19 259)">, "black 15%"]>(parts_0: "in oklab", parts_1: Token<"color", true, "oklch(62% 0.19 259)">, parts_2: "black 15%") => css.CSSStyleValue<"color-mix()">`color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})`. Chrome 111, Edge 111, Firefox 113, Safari 16.2, iOS 16.2, Android 111. [MDN](https://developer.mozilla.org/docs/Web/CSS/color_value/color-mix)colorMix("in oklab", const t: css.Tokens<{
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}, undefined, {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
color: css.Tokens<{
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
}, "color", {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
accent: Token<"color", true, "oklch(62% 0.19 259)">accent, "black 15%"));
export const const g: css.Styleg = import csscss.const color: <readonly [css.CSSStyleValue<"oklch()">]>(parts_0: css.CSSStyleValue<"oklch()">) => css.Style`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/color)color(import csscss.const oklch: <readonly [0.7, 0.1, 200, "/", 0.5]>(parts_0: 0.7, parts_1: 0.1, parts_2: 200, parts_3: "/", parts_4: 0.5) => css.CSSStyleValue<"oklch()">`oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )`. Chrome 111, Edge 111, Firefox 113, Safari 15.4, iOS 15.4, Android 111. [MDN](https://developer.mozilla.org/docs/Web/CSS/color_value/oklch)oklch(0.7, 0.1, 200, "/", 0.5)); // color: oklch(0.7 0.1 200 / 0.5)
export const const h: css.Styleh = import csscss.const backgroundImage: <readonly [css.CSSStyleValue<"linear-gradient()">]>(parts_0: css.CSSStyleValue<"linear-gradient()">) => css.Style`<bg-image>#`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/background-image)backgroundImage(import csscss.const linearGradient: <readonly ["to right", readonly [Token<"color", true, "oklch(62% 0.19 259)">, "25%"], "blue"]>(parts_0: "to right", parts_1: readonly [Token<"color", true, "oklch(62% 0.19 259)">, "25%"], parts_2: "blue") => css.CSSStyleValue<"linear-gradient()">`linear-gradient( [ <linear-gradient-syntax> ] )`. Chrome 26, Edge 12, Firefox 16, Safari 7, iOS 7, Android 26. [MDN](https://developer.mozilla.org/docs/Web/CSS/gradient/linear-gradient)linearGradient("to right", [const t: css.Tokens<{
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}, undefined, {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
color: css.Tokens<{
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
}, "color", {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
accent: Token<"color", true, "oklch(62% 0.19 259)">accent, "25%"], "blue"));
export const const i: css.Stylei = import csscss.const transitionTimingFunction: <readonly [css.CSSStyleValue<"cubic-bezier()">]>(parts_0: css.CSSStyleValue<"cubic-bezier()">) => css.Style`<easing-function>#`. Chrome 26, Edge 12, Firefox 16, Safari 9, iOS 9, Android 26. [MDN](https://developer.mozilla.org/docs/Web/CSS/transition-timing-function)transitionTimingFunction(import csscss.const cubicBezier: <readonly [0.1, 0.7, 1, 0.1]>(parts_0: 0.1, parts_1: 0.7, parts_2: 1, parts_3: 0.1) => css.CSSStyleValue<"cubic-bezier()">`cubic-bezier( [ <number [0,1]>, <number> ]#{2} )`. Chrome 16, Edge 12, Firefox 4, Safari 6, iOS 6, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/easing-function/cubic-bezier)cubicBezier(0.1, 0.7, 1, 0.1));
export const const img: css.Styleimg = import csscss.const backgroundImage: <readonly [css.CSSStyleValue<"url">]>(parts_0: css.CSSStyleValue<"url">) => css.Style`<bg-image>#`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/background-image)backgroundImage(import csscss.const url: <readonly ["\"a.png\""]>(parts_0: "\"a.png\"") => css.CSSStyleValue<"url">`url( <string> <url-modifier>* ) | <url-token>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/Reference/Values/url_function)url('"a.png"')); // url("a.png"): the quotes are yours
export const const j: css.Stylej = import csscss.const transform: <readonly [css.CSSStyleValue<"translate()">, css.CSSStyleValue<"rotate()">]>(parts_0: css.CSSStyleValue<"translate()">, parts_1: css.CSSStyleValue<"rotate()">) => css.Style`none | <transform-list>`. Chrome 36, Edge 12, Firefox 16, Safari 9, iOS 9, Android 36. [MDN](https://developer.mozilla.org/docs/Web/CSS/transform)transform(import csscss.const translateFn: <readonly [Token<"length", true, "16px">, 0]>(parts_0: Token<"length", true, "16px">, parts_1: 0) => css.CSSStyleValue<"translate()">`translate( <length-percentage> , <length-percentage>? )`. Chrome 1, Edge 12, Firefox 3.5, Safari 3.1, iOS 3.2, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/transform-function/translate)translateFn(const t: css.Tokens<{
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}, undefined, {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
space: css.Tokens<{
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
}, "dimension", {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
md: Token<"length", true, "16px">md, 0), import csscss.const rotateFn: <readonly ["10deg"]>(parts_0: "10deg") => css.CSSStyleValue<"rotate()">`rotate( [ <angle> | <zero> ] )`. Chrome 1, Edge 12, Firefox 3.5, Safari 3.1, iOS 3.2, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/transform-function/rotate)rotateFn("10deg"));
export const const k: css.Stylek = import csscss.const width: <readonly [css.CSSStyleValue<Sentinels>]>(parts_0: css.CSSStyleValue<Sentinels>) => css.Style`auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/width)width(import csscss.const calc: <readonly [Token<"length", true, "16px">, "+", Token<"time", true, "100ms">]>(parts_0: Token<"length", true, "16px">, parts_1: "+", parts_2: "cannot add length and time") => css.CSSStyleValue<Sentinels>`calc( <calc-sum> )`. Chrome 26, Edge 12, Firefox 16, Safari 7, iOS 7, Android 28. [MDN](https://developer.mozilla.org/docs/Web/CSS/calc)calc(const t: css.Tokens<{
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}, undefined, {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
space: css.Tokens<{
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
}, "dimension", {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
md: Token<"length", true, "16px">md, "+", t.time.fast)); // error: cannot add length and timeexport const const l: css.Stylel = import csscss.const width: <readonly [css.CSSStyleValue<Sentinels>]>(parts_0: css.CSSStyleValue<Sentinels>) => css.Style`auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/width)width(import csscss.const calc: <readonly [Token<"length", true, "16px">, "*", Token<"length", true, "16px">]>(parts_0: Token<"length", true, "16px">, parts_1: "*", parts_2: "cannot multiply length by length") => css.CSSStyleValue<Sentinels>`calc( <calc-sum> )`. Chrome 26, Edge 12, Firefox 16, Safari 7, iOS 7, Android 28. [MDN](https://developer.mozilla.org/docs/Web/CSS/calc)calc(const t: css.Tokens<{
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}, undefined, {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
space: css.Tokens<{
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
}, "dimension", {
readonly color: {
readonly $type: "color";
readonly accent: {
readonly $value: "oklch(62% 0.19 259)";
};
readonly bg: {
readonly $value: "white";
};
};
readonly space: {
readonly $type: "dimension";
readonly sm: {
readonly $value: "8px";
};
readonly md: {
readonly $value: "16px";
};
};
readonly time: {
readonly $type: "duration";
readonly fast: {
readonly $value: "100ms";
};
};
}>
md: Token<"length", true, "16px">md, "*", t.space.md)); // error: cannot multiply length by lengthexport const const m: css.Stylem = import csscss.const color: <readonly [css.CSSStyleValue<"light-dark()">]>(parts_0: css.CSSStyleValue<"light-dark()">) => css.Style`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/color)color(import csscss.const lightDark: <readonly ["white", Token<"length", true, "16px">]>(parts_0: "white", parts_1: "light-dark(): unexpected \"⟨length⟩\" in \"light-dark(white, ⟨length⟩)\", grammar <light-dark()> (argument 2)") => css.CSSStyleValue<"light-dark()">`light-dark( <color>, <color> )`. Chrome 123, Edge 123, Firefox 120, Safari 17.5, iOS 17.5, Android 123. [MDN](https://developer.mozilla.org/docs/Web/CSS/color_value/light-dark)lightDark("white", t.space.md)); // error: a length is not a colourexport const const n: css.Stylen = import csscss.const width: <readonly [css.CSSStyleValue<"rgb()">]>(parts_0: "width: unexpected \"⟨rgb(\" in \"⟨rgb()⟩\", grammar auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>") => css.Style`auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/width)width(css.rgb(255, 0, 0)); // error: a colour is not a length", ", or by a space when the function's grammar has no comma (oklch, hwb, lab, color, inset, circle, dropShadow). An operator is a string part, "+", "-", "*" or "/", and joins its neighbours with a space instead: calc(t.space.md, "*", 2) is calc(var(--space-md) * 2), min(t.space.md, "*", 2, "4px") is min(var(--space-md) * 2, 4px), oklch(0.7, 0.1, 200, "/", 0.5) is oklch(0.7 0.1 200 / 0.5). A number is its text. rgb(255, 0, 0) is the comma syntax; the space syntax is rgb("255 0 0", "/", 0.5) or rgb("from", t.color.accent, "r", "g", "b") (a relative colour, with a token)."2vw" or "50%", a number) and folded with the precedence of CSS: * and / before + and -; a length times a number is a length, a length over a length a number, a length plus a percentage a length-percentage. The result has the kind of its arguments (min, max, clamp, calc, round, mod, rem, hypot, abs), or is a number (sign, sin, cos, tan, sqrt, exp, pow, log) or an angle (asin, acos, atan, atan2). calc(t.space.md, "+", t.time.fast) is a type error on t.time.fast (cannot add length and time), as is a colour in a calculation. A string the types cannot read ("var(--x)", "(1px + 2px)", "pi") is of any kind and the result is a wild typed value. round("up", x, y) skips its mode.<name()>: lightDark("white", t.space.md) is an error because a length is not a <color>, colorMix("in rgb", ...) because rgb is not a colour space. The result is a CSSStyleValue<"name()">, a value where the grammar of the property reaches <name()> through its types (<color> reaches <light-dark()>, <image> the gradients). The error is on the argument where the text stops matching the grammar, with the message of the call and the position (light-dark(): unexpected "1px" in "light-dark(white, 1px)", grammar <light-dark()> (argument 2)); a call that ends too soon says unexpected end ... (after argument 1) on its last argument. The recognizer does not say where it stopped inside a call, so the types find the argument by prefixes: the first one after which name(parts so far, var(--x)) (a var() stands for any run of values) is no <name()>. It costs nothing on a valid call. A function a property writes inline in its grammar (fit-content() and minmax() in the grid and size properties) is not reached by its type: write it as a string.min(): unexpected "min(1rem" in "min(1rem, 2s)" (min() cannot take length and time). Any other function names the bad argument as the types do: light-dark(): unexpected "1px" in "light-dark(white, 1px)", expected <light-dark()> (argument 2) (see "Errors"). A token is checked as a literal of its type (calc(): unexpected "calc(1px" in "calc(1px + 1s)" (cannot add length and time) ("calc(var(--space-md) + var(--time-fast))" is checked as "calc(1px + 1s)": ...)). What the types leave to the build: the number of arguments (clamp takes three, light-dark two), numeric ranges (a share over 100%), and sqrt of a length.Fn after its name: attrFn (attr() the value; attr is the attribute condition), and the functions that are also properties, colorFn (color() the colour; color is the property), insetFn, opacityFn, perspectiveFn, rotateFn, scaleFn, translateFn. A name that is a pseudo-class or another builder would be treated the same way; the list is computed (FUNCTIONS in lib.ts), not written. var is a reserved word: css.var(...) and import { var as v } from "cssints".colorMix, min, max, clamp are generated now. colorMix takes the grammar's arguments, the interpolation method with its in (colorMix("in oklab", a, b), was colorMix("oklab", a, b)). min, max and clamp infer their kind from their arguments (clamp<"number">(0, x, 1) is clamp(0, x, 1)).