@windijs/core
Version:
@windijs/core
707 lines (697 loc) • 28.4 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var helpers = require('@windijs/helpers');
var shared = require('@windijs/shared');
function prefixer(filter, updater) {
let updated;
return (t) => {
for (const [k, v] of Object.entries(t))
if (typeof filter === "function" ? filter(k, v) : Array.isArray(filter) ? filter.includes(k) : k === filter) {
updated = updater(k, v);
if (k in updated)
Reflect.set(t, k, updated[k]);
t = Object.assign(updater(k, v), t);
}
return t;
};
}
const prefixKeyframes = prefixer(["transform", "animationTimingFunction", "transformOrigin"], (k, v) => ({
["-webkit-" + shared.camelToDash(k)]: v,
}));
const prefixAnimation = prefixer("animation", (_, v) => ({ "-webkit-animation": v }));
const prefixImageRendering = prefixer("imageRendering", (_, v) => v === "pixelated"
? {
"-ms-interpolation-mode": "nearest-neighbor",
imageRendering: ["-webkit-optimize-contrast", "-moz-crisp-edges", "-o-pixelated", "pixelated"],
}
: {});
const prefixNotHidden = (t) => ({
"& > :not([hidden]) ~ :not([hidden])": t,
});
const prefixPlaceholder = (t) => ({
"&::-webkit-input-placeholder": t,
"&::-moz-placeholder": t,
"&:-ms-input-placeholder": t,
"&::-ms-input-placeholder": t,
"&::placeholder": t,
});
const prefixWritingMode = prefixer("writingMode", (_, v) => ({
"-webkit-writing-mode": v,
"-ms-writing-mode": v.replace("vertical", "tb").replace("horizontal", "lr"),
}));
const buildProperty = (property, value) => (Array.isArray(property) ? Object.fromEntries(property.map(i => [i, value])) : { [property]: value });
function buildStatic(property, value) {
if (typeof value === "string")
return helpers.css(buildProperty(property, value));
}
function buildColor(colorProperty, colorOpacityProperty, value, prefixer = i => i) {
if (typeof value !== "string")
return undefined;
let decl = buildProperty(colorProperty, value);
if (colorOpacityProperty != null) {
if (value.startsWith("#")) {
const [r, g, b, a] = helpers.hexToRGB(value);
decl = {
...buildProperty(colorProperty, shared.parenWrap("rgba", [r, g, b, shared.parenWrap("var", colorOpacityProperty)].join(", "))),
[colorOpacityProperty]: a.toString(),
};
}
else if (/^(rgb|hwb|hsl)/.test(value)) {
const values = helpers.sliceColor(value);
decl = {
...buildProperty(colorProperty, value.startsWith("hwb")
? shared.parenWrap("hwb", values.slice(0, 3).join(" ") + " / " + shared.parenWrap("var", colorOpacityProperty))
: shared.parenWrap(value.startsWith("hsl") ? "hsla" : "rgba", [...values.slice(0, 3), shared.parenWrap("var", colorOpacityProperty)].join(", "))),
[colorOpacityProperty]: values[3] ?? "1",
};
}
const gradient = (obj) => ({
get gradient() {
return helpers.css(prefixer({
...obj,
backgroundImage: "linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))",
}));
},
});
return helpers.css(prefixer(decl), {
opacity(op) {
const obj = { ...decl };
obj[colorOpacityProperty] = (op / 100).toString();
return helpers.css(prefixer(obj), gradient(obj));
},
...gradient(decl),
});
}
return helpers.css(prefixer(decl));
}
function buildContainer(screens, center = false) {
const m = new Map();
m.set("width", "100%");
if (center)
m.set("marginLeft", "auto") && m.set("marginRight", "auto");
for (const [k, v] of Object.entries(screens))
if (k === "DEFAULT") {
if (Array.isArray(v))
Object.entries(v[1]).forEach(([k, v]) => m.set(k, v));
}
else if (typeof v === "string")
m.set(`@media (min-width: ${v})`, { maxWidth: v });
else
m.set(`@media (min-width: ${v[0]})`, { maxWidth: v[0], ...v[1] });
return helpers.css(m);
}
function buildNotHidden(property) {
return (v) => helpers.css(prefixNotHidden(buildProperty(property, v)));
}
function buildFontSize(fontSize, lineHeight, others) {
let decl = { fontSize };
if (lineHeight != null)
decl.lineHeight = lineHeight;
if (others != null)
decl = { ...decl, ...others };
return helpers.css(decl);
}
function buildFlexDirection(v) {
if (typeof v !== "string")
return undefined;
return helpers.css({
"-webkit-box-orient": v.startsWith("row") ? "horizontal" : "vertical",
"-webkit-box-direction": v.includes("reverse") ? "reverse" : "normal",
"-ms-flex-direction": v,
"-webkit-flex-direction": v,
flexDirection: v,
});
}
function buildFlexStretch(v) {
if (typeof v !== "string")
return undefined;
return helpers.css({
"-webkit-box-flex": v === "none" || v.startsWith("0") ? "0" : "1",
"-ms-flex": v,
"-webkit-flex": v,
flex: v,
});
}
function buildReverse(v, first, second, rev) {
return {
[rev]: "0",
[first]: `calc(${v} * var(${rev}))`,
[second]: `calc(${v} * calc(1 - var(${rev})))`,
};
}
function buildDivideY(v) {
return helpers.css(prefixNotHidden(buildReverse(v, "borderBottomWidth", "borderTopWidth", "--w-divide-y-reverse")));
}
function buildDivideX(v) {
return helpers.css(prefixNotHidden(buildReverse(v, "borderRightWidth", "borderLeftWidth", "--w-divide-x-reverse")));
}
function buildSpaceBetweenY(v) {
return helpers.css(prefixNotHidden(buildReverse(v, "marginBottom", "marginTop", "--w-space-y-reverse")));
}
function buildSpaceBetweenX(v) {
return helpers.css(prefixNotHidden(buildReverse(v, "marginRight", "marginLeft", "--w-space-x-reverse")));
}
const joinFilters = (filters) => filters.map(i => (typeof i === "string" ? i : helpers.getFirstVar(i)?.[1])).join(" ");
const buildFilter = (...filters) => helpers.css(Object.fromEntries(["-webkit-filter", "filter"].map(i => [i, joinFilters(filters)])));
const buildBackdropFilter = (...filters) => helpers.css(Object.fromEntries(["-webkit-backdrop-filter", "backdropFilter"].map(i => [i, joinFilters(filters)])));
const joinTransforms = (transformations) => transformations
.map(t => {
if (typeof t === "string")
return t;
const [k, v] = helpers.getFirstVar(t) ?? [];
return k && v ? shared.parenWrap(shared.dashToCamel(k.slice(4)), v) : "";
})
.join(" ");
const buildTransform = (...transformations) => helpers.css(Object.fromEntries(["-webkit-transform", "-ms-transform", "transform"].map(i => [i, joinTransforms(transformations)])));
function buildTransition(property, ...styles) {
return helpers.css(Object.assign({ transitionProperty: property }, ...styles.map(i => i[helpers.SymbolCSS])));
}
function buildKeyframes(name, keyframes) {
keyframes = Object.fromEntries(Object.entries(keyframes).map(([k, v]) => [k, prefixKeyframes(v)]));
return {
[`@-webkit-keyframes ${name}`]: keyframes,
[`@keyframes ${name}`]: keyframes,
};
}
function buildODir(v) {
return [
v.includes("top") ? "bottom" : v.includes("bottom") ? "top" : null,
v.includes("left") ? "right" : v.includes("right") ? "left" : null,
v.endsWith("deg") ? (Math.abs(450 - +v.slice(0, -3)) % 360) + "deg" : null,
]
.filter(i => i != null)
.join(" ");
}
function buildWebkitGradient(v, colorStops) {
const len = colorStops.length;
const dirs = v.split(" ");
const stops = colorStops.map((stop, i) => i === 0 && typeof stop === "string"
? shared.parenWrap("from", stop)
: i === len - 1 && len > 1 && typeof stop === "string"
? shared.parenWrap("to", stop)
: shared.parenWrap("color-stop", Array.isArray(stop) ? stop.reverse().join(", ") : stop.toString()));
return `-webkit-gradient(linear, ${dirs.find(v => v === "left") ? "right" : "left"} ${dirs.find(v => v === "top") ? "bottom" : "top"}, ${dirs.find(v => v === "left" || v === "right") ?? "left"} ${dirs.find(v => v === "top" || v === "bottom") ?? "top"}, ${stops.join(", ")})`;
}
function buildGradientDirection(v, colorStops = ["var(--w-gradient-stops)"]) {
if (typeof v !== "string")
return;
let d;
const isTo = () => /top|left|bottom|right/.test(v);
if (isTo())
d = "to " + v;
else {
d = v;
switch (v) {
case "0deg":
v = "top";
break;
case "90deg":
v = "right";
break;
case "180deg":
v = "bottom";
break;
case "270deg":
v = "left";
break;
}
}
const c = colorStops.map(i => (Array.isArray(i) ? i.join(" ") : i)).join(", ");
const g = `linear-gradient(${d}, ${c})`;
const o = `-o-linear-gradient(${buildODir(v)}, ${c})`;
return helpers.css({
backgroundImage: isTo() ? [buildWebkitGradient(v, colorStops), o, g] : [o, g],
});
}
function buildLinearGradient(direction, ...colorStops) {
return buildGradientDirection(typeof direction === "string" && direction.startsWith("to ") ? direction.slice(3) : direction.toString(), colorStops);
}
function buildGradientFrom(v) {
return buildColor(helpers.prop `--w-gradient-from`, "--w-from-opacity", v, c => ({
...c,
"--w-gradient-stops": "var(--w-gradient-from), var(--w-gradient-to, rgba(255, 255, 255, 0))",
}));
}
function buildGradientVia(v) {
return buildColor(helpers.prop `--w-gradient-via`, "--w-via-opacity", v, c => ({
"--w-gradient-stops": `var(--w-gradient-from), ${c["--w-gradient-via"]}, var(--w-gradient-to, rgba(255, 255, 255, 0))`,
}));
}
function buildGradientTo(v) {
return buildColor(helpers.prop `--w-gradient-to`, "--w-to-opacity", v);
}
function buildDivideColor(v) {
return buildColor("borderColor", "--w-divide-opacity", v, prefixNotHidden);
}
function buildDivideOpacity(v) {
return buildNotHidden(helpers.prop `--w-divide-opacity`)(v);
}
function buildDivideStyle(v) {
return buildNotHidden("borderStyle")(v);
}
function buildRingWidth(v) {
return helpers.css({
"--w-ring-offset-shadow": "var(--w-ring-inset) 0 0 0 var(--w-ring-offset-width) var(--w-ring-offset-color)",
"--w-ring-shadow": `var(--w-ring-inset) 0 0 0 calc(${v} + var(--w-ring-offset-width)) var(--w-ring-color)`,
"-webkit-box-shadow": "var(--w-ring-offset-shadow), var(--w-ring-shadow), var(--w-shadow, 0 0 #0000)",
boxShadow: "var(--w-ring-offset-shadow), var(--w-ring-shadow), var(--w-shadow, 0 0 #0000)",
});
}
function buildBoxShadowSize(v) {
return helpers.css({
"--w-shadow": v,
"--w-shadow-colored": v.replace(/rgba?\([0-9.,/\s]*\)/g, "var(--w-shadow-color)"),
"-webkit-box-shadow": "var(--w-ring-offset-shadow, 0 0 #0000), var(--w-ring-shadow, 0 0 #0000), var(--w-shadow)",
boxShadow: "var(--w-ring-offset-shadow, 0 0 #0000), var(--w-ring-shadow, 0 0 #0000), var(--w-shadow)",
});
}
function buildBoxShadowColor(v) {
return buildColor(helpers.prop `--w-shadow-color`, "--w-shadow-color-opacity", v, o => ({
...o,
"--w-shadow": "var(--w-shadow-colored)",
}));
}
function buildImageRendering(v) {
return helpers.css(prefixImageRendering(buildProperty("imageRendering", v)));
}
function buildPlaceholder(v) {
return buildColor("color", "--w-placeholder-opacity", v, prefixPlaceholder);
}
function buildWritingMode(v) {
return helpers.css(prefixWritingMode(buildProperty("writingMode", v)));
}
function handleConfig(build, statics, type, p) {
helpers.updateMetaType(type);
// handle DEFAULT
if (p === "meta" || p === helpers.SymbolMeta)
return helpers.getMeta();
if ((p === "css" || p === helpers.SymbolCSS) && "DEFAULT" in statics)
return build(statics.DEFAULT)?.css;
if (p === "toString" && "DEFAULT" in statics)
return build(statics.DEFAULT)?.toString;
if (typeof p === "symbol")
return undefined;
const value = statics[p];
if (value != null && helpers.pushMetaProp(p)) {
if (typeof value === "object" && !Array.isArray(value)) {
if (helpers.SymbolCSS in value) {
value[helpers.SymbolMeta] = helpers.getMeta();
return value;
}
statics[p][helpers.SymbolProxy] = true;
return new Proxy(value, {
get: (target, p2) => target[helpers.SymbolData]?.[p2] || handleConfig(build, value, type, p2),
set(target, p, newValue) {
if (!target[helpers.SymbolData])
target[helpers.SymbolData] = {};
target[helpers.SymbolData][p] = newValue;
return true;
},
});
}
return build(value);
}
}
function handler(type, get, meta) {
return { type, meta, get };
}
function isHandler(i) {
return i != null && typeof i === "object" && "get" in i && "type" in i;
}
function cssHandler(cssOrStyle) {
return {
type: "css",
get(p) {
cssOrStyle = helpers.isStyleObject(cssOrStyle) ? helpers.resetStyleMeta(cssOrStyle) : helpers.css(cssOrStyle);
return Reflect.get(cssOrStyle, p);
},
};
}
function callHandler(call, plugin) {
return {
type: "call",
get: (prop) => new Proxy(call, {
get(target, p, receiver) {
if (p in target)
return Reflect.get(target, p, receiver);
if (plugin)
return plugin.get(p);
},
apply(target, thisArg, argArray) {
helpers.pushMetaProp(shared.parenWrap(prop, argArray.toString()));
return Reflect.apply(target, thisArg, argArray);
},
}),
};
}
function colorHandler(colors, colorPropertyOrBuildFunc, colorOpacityProperty) {
const build = typeof colorPropertyOrBuildFunc === "function"
? colorPropertyOrBuildFunc
: value => buildColor(colorPropertyOrBuildFunc, colorOpacityProperty, value);
return {
type: "color",
meta: { colors, op: colorOpacityProperty },
get: (p) => handleConfig(build, colors, "color", p),
};
}
function configHandler(config, propertyOrBuildFunc) {
const build = typeof propertyOrBuildFunc === "function" ? propertyOrBuildFunc : value => buildStatic(propertyOrBuildFunc, value);
return {
type: "config",
meta: { config },
get: (p) => handleConfig(build, config, "static", p),
};
}
function genericHandler(a, b) {
return {
type: "generic",
get(p) {
let v, r;
helpers.pushMetaProp(p) && helpers.updateMetaType("generic");
if (typeof b === "function" && (v = b(p)))
return v == null ? undefined : typeof a === "function" ? a(v) : helpers.css(buildProperty(a, v));
if (typeof a === "function" && (r = a(p)))
return helpers.isStyleObject(r) ? r : helpers.css(r);
},
};
}
function numberHandler(propertyOrBuildFunc, size = "") {
const build = typeof propertyOrBuildFunc === "function" ? propertyOrBuildFunc : value => buildStatic(propertyOrBuildFunc, value);
return {
type: "number",
meta: { size },
get: p => (shared.isNumber(p) ? build(p + size) : undefined),
};
}
const pxHandler = (propertyOrBuildFunc) => numberHandler(propertyOrBuildFunc, "px");
const remHandler = (propertyOrBuildFunc) => numberHandler(propertyOrBuildFunc, "rem");
const degHandler = (propertyOrBuildFunc) => numberHandler(propertyOrBuildFunc, "deg");
const msHandler = (propertyOrBuildFunc) => numberHandler(propertyOrBuildFunc, "ms");
function spacingHandler(propertyOrBuildFunc) {
const build = typeof propertyOrBuildFunc === "function" ? propertyOrBuildFunc : value => buildStatic(propertyOrBuildFunc, value);
return {
type: "spacing",
get: p => (shared.isNumber(p) ? build(+p / 4 + (p === "0" ? "px" : "rem")) : undefined),
};
}
function fractionHandler(propertyOrBuildFunc) {
const build = typeof propertyOrBuildFunc === "function" ? propertyOrBuildFunc : value => buildStatic(propertyOrBuildFunc, value);
return {
type: "fraction",
get: p => (shared.isFraction(p) ? build(shared.fracToPercent(p)) : undefined),
};
}
/**
* Use single plugin.
* @param uid
* @param plugin
* @returns
*/
function use(uid, plugin) {
return new Proxy({}, {
get(target, prop) {
helpers.resetMeta(uid);
const res = plugin.get(prop);
if (res)
return res;
},
});
}
function useVariant(rule, utilities) {
return utilities.flat().filter(u => u != null).map(u => helpers.SymbolProxy in u ? helpers.css(u.css, undefined, { ...u.meta, variants: [...u.meta.variants, rule] }) : (u[helpers.SymbolMeta].variants.push(rule), u));
}
const useMedia = (rule, utilities) => useVariant("@media " + rule, utilities);
const createVariant = (rule) => (...utilities) => useVariant(rule, utilities);
const createMedia = (rule) => (...utilities) => useMedia(rule, utilities);
function createScreenVariants(screens, mobile = true) {
return Object.fromEntries(Object.entries(screens).map(([k, v]) => [k, createMedia(`(${mobile ? "min" : "max"}-width: ${v})`)]));
}
function createDarkModeVariants(media = true) {
return {
dark: media ? createMedia("(prefers-color-scheme: dark)") : createVariant(".dark &"),
light: media ? createMedia("(prefers-color-scheme: light)") : createVariant(".light &"),
};
}
function createOrientationVariants(orientations) {
return Object.fromEntries(Object.entries(orientations).map(([k, v]) => [k, createMedia(`(orientation: ${v})`)]));
}
function createMotionVariants(motions) {
return Object.fromEntries(Object.entries(motions).map(([k, v]) => [k, createMedia(`(prefers-reduced-motion: ${v})`)]));
}
const variant = (rule, ...utilities) => useVariant(rule, utilities);
const media = (rule, ...utilities) => useMedia(rule, utilities);
function bind(cfg, f) {
return ((v) => f(v in cfg ? cfg[v] : v));
}
function guard(key, handler) {
const target = { [helpers.SymbolProxy]: true };
return {
type: "guard",
meta: { key, handler },
get(p) {
if (p !== key)
return;
if (handler.type === "call")
return handler.get(p);
helpers.pushMetaProp(p) && Reflect.set(target, helpers.SymbolProxy, true);
return new Proxy(target, {
get: (t, p) => t[p] || handler.get(p),
});
},
};
}
function setup(t, root = true) {
return new Proxy(t, {
get(target, p) {
let v;
if (p === helpers.SymbolProxy)
return true;
if (root)
helpers.resetMeta(helpers.getUid());
if (p in target) {
v = Reflect.get(target, p);
if (v == null)
return;
helpers.pushMetaProp(p);
if (isHandler(v))
return Reflect.set(v, helpers.SymbolProxy, true) && new Proxy(v, { get: (_, p) => v.get(p) });
return helpers.isStyleObject(v) ? helpers.css(v[helpers.SymbolCSS]) : typeof v === "object" ? setup(v, false) : v;
}
v = target.DEFAULT;
return isHandler(v) ? v.get(p) : helpers.isStyleObject(v) ? (p === "meta" || p === helpers.SymbolMeta ? helpers.getMeta() : Reflect.get(v, p)) : v;
},
});
}
function setupHandler(config) {
return {
type: "setup",
meta: { config },
get: p => Reflect.get(setup(config), p),
};
}
function setupUtility(uid, t) {
helpers.resetMeta(uid);
if (helpers.isStyleObject(t))
return helpers.css(t[helpers.SymbolCSS]);
return isHandler(t) ? use(uid, t) : setup(t);
}
function setupVariant(config) {
return Object.fromEntries(Object.entries(config).map(([k, v]) => [k, createVariant(v)]));
}
class Utility {
constructor(uid) {
this.uid = uid;
this.plugins = [];
}
get(target, prop) {
if (Reflect.has(target, prop))
return Reflect.get(target, prop);
helpers.resetMeta(this.uid);
let result;
for (const plugin of this.plugins) {
result = plugin(prop);
if (result)
return result;
}
}
set(target, prop, value) {
return Reflect.defineProperty(target, prop, { value, writable: true });
}
case(trigger, plugin) {
this.plugins.push(guard(trigger, plugin).get);
return this;
}
use(plugin) {
this.plugins.push(plugin.get);
return this;
}
init(target, handler) {
if (!target)
target = function () {
return;
};
Object.defineProperty(target, helpers.SymbolProxy, { value: true });
return new Proxy(target, handler || this);
}
}
/**
* Create a new utility.
* @param uid Utility ID, usually it should be consistent with the variiable name you declared. Such as, `const bg = createUtility("bg")`
* @returns Utility
*/
function createUtility(uid) {
return new Utility(uid);
}
// TODO: not sure if there is a way to do this better
/* Generate Using: console.log(new Array(26).fill(0).map((_, i) => new Array(i + 1).fill(0).map((_, u) => String.fromCharCode(u + 65))).map(v => `export function meld <${v.join(", ")}> (${v.map(x => x.toLowerCase() + ": " + "Handler<" + x + ">").join(", ")}): Handler<${v.join(" & ")}>;`).reverse().join("\n")); */
function meld(...handlers) {
return {
type: "meld",
meta: { handlers },
get(prop) {
let result;
for (const handler of handlers) {
result = handler.get(prop);
if (result)
return result;
}
},
};
}
const animateHandler = (name, value, keyframes) => {
const map = new Map();
const setValue = (o) => Object.entries(o).map(([k, v]) => map.set(k, v));
if (keyframes)
setValue(buildKeyframes(name, keyframes));
setValue(typeof value === "string" ? buildProperty([helpers.prop `-webkit-animation`, "animation"], value) : prefixAnimation(value));
return guard(name, cssHandler(map));
};
function backgroundGenericHandler() {
return genericHandler("backgroundColor", prop => {
if (shared.isNumber(prop))
return "#" + (+prop).toString(16);
return prop;
});
}
function divideXReverseHandler() {
return cssHandler(prefixNotHidden({
"--w-divide-x-reverse": "1",
}));
}
function divideYReverseHandler() {
return cssHandler(prefixNotHidden({
"--w-divide-y-reverse": "1",
}));
}
function fontFamilyHandler(fonts) {
const cssFonts = {};
for (const [key, value] of Object.entries(fonts))
cssFonts[key] = Array.isArray(value) ? value.join(",") : value;
return configHandler(cssFonts, "fontFamily");
}
function fontSizeHandler(sizes) {
return configHandler(sizes, value => {
if (typeof value === "string")
return buildFontSize(value);
if (Array.isArray(value) && value[0]) {
if (value[1] == null || typeof value[1] === "string")
return buildFontSize(value[0], value[1]);
if (typeof value[1] === "object" && value[1] != null)
return buildFontSize(value[0], undefined, value[1]);
}
});
}
function spaceBetweenXReverseHandler() {
return cssHandler(prefixNotHidden({
"--w-space-x-reverse": "1",
}));
}
function spaceBetweenYReverseHandler() {
return cssHandler(prefixNotHidden({
"--w-space-y-reverse": "1",
}));
}
exports.Utility = Utility;
exports.animateHandler = animateHandler;
exports.backgroundGenericHandler = backgroundGenericHandler;
exports.bind = bind;
exports.buildBackdropFilter = buildBackdropFilter;
exports.buildBoxShadowColor = buildBoxShadowColor;
exports.buildBoxShadowSize = buildBoxShadowSize;
exports.buildColor = buildColor;
exports.buildContainer = buildContainer;
exports.buildDivideColor = buildDivideColor;
exports.buildDivideOpacity = buildDivideOpacity;
exports.buildDivideStyle = buildDivideStyle;
exports.buildDivideX = buildDivideX;
exports.buildDivideY = buildDivideY;
exports.buildFilter = buildFilter;
exports.buildFlexDirection = buildFlexDirection;
exports.buildFlexStretch = buildFlexStretch;
exports.buildFontSize = buildFontSize;
exports.buildGradientDirection = buildGradientDirection;
exports.buildGradientFrom = buildGradientFrom;
exports.buildGradientTo = buildGradientTo;
exports.buildGradientVia = buildGradientVia;
exports.buildImageRendering = buildImageRendering;
exports.buildKeyframes = buildKeyframes;
exports.buildLinearGradient = buildLinearGradient;
exports.buildNotHidden = buildNotHidden;
exports.buildPlaceholder = buildPlaceholder;
exports.buildProperty = buildProperty;
exports.buildReverse = buildReverse;
exports.buildRingWidth = buildRingWidth;
exports.buildSpaceBetweenX = buildSpaceBetweenX;
exports.buildSpaceBetweenY = buildSpaceBetweenY;
exports.buildStatic = buildStatic;
exports.buildTransform = buildTransform;
exports.buildTransition = buildTransition;
exports.buildWritingMode = buildWritingMode;
exports.callHandler = callHandler;
exports.colorHandler = colorHandler;
exports.configHandler = configHandler;
exports.createDarkModeVariants = createDarkModeVariants;
exports.createMedia = createMedia;
exports.createMotionVariants = createMotionVariants;
exports.createOrientationVariants = createOrientationVariants;
exports.createScreenVariants = createScreenVariants;
exports.createUtility = createUtility;
exports.createVariant = createVariant;
exports.cssHandler = cssHandler;
exports.degHandler = degHandler;
exports.divideXReverseHandler = divideXReverseHandler;
exports.divideYReverseHandler = divideYReverseHandler;
exports.fontFamilyHandler = fontFamilyHandler;
exports.fontSizeHandler = fontSizeHandler;
exports.fractionHandler = fractionHandler;
exports.genericHandler = genericHandler;
exports.guard = guard;
exports.handleConfig = handleConfig;
exports.handler = handler;
exports.isHandler = isHandler;
exports.joinFilters = joinFilters;
exports.joinTransforms = joinTransforms;
exports.media = media;
exports.meld = meld;
exports.msHandler = msHandler;
exports.numberHandler = numberHandler;
exports.prefixAnimation = prefixAnimation;
exports.prefixImageRendering = prefixImageRendering;
exports.prefixKeyframes = prefixKeyframes;
exports.prefixNotHidden = prefixNotHidden;
exports.prefixPlaceholder = prefixPlaceholder;
exports.prefixWritingMode = prefixWritingMode;
exports.prefixer = prefixer;
exports.pxHandler = pxHandler;
exports.remHandler = remHandler;
exports.setup = setup;
exports.setupHandler = setupHandler;
exports.setupUtility = setupUtility;
exports.setupVariant = setupVariant;
exports.spaceBetweenXReverseHandler = spaceBetweenXReverseHandler;
exports.spaceBetweenYReverseHandler = spaceBetweenYReverseHandler;
exports.spacingHandler = spacingHandler;
exports.use = use;
exports.useMedia = useMedia;
exports.useVariant = useVariant;
exports.variant = variant;