@windijs/style/dist/windijsStyle.mjs

@windijs/style

import { handleConfig, createUtility } from '@windijs/core';
import { getMeta, resetMeta, quote, attr, url, $var, path, hwb, dropShadow, counters, circle, ellipse, inset, polygon, matrix, matrix3d, perspective, rotate, rotate3d, rotateX, rotateY, rotateZ, scale, scale3d, scaleX, scaleY, scaleZ, skew, skewX, skewY, translate, translate3d, translateX, translateY, translateZ, steps, calc, clamp, max, min, abs, sign, blur, brightness, contrast, grayscale, invert, opacity, saturate, sepia, rgb, rgba, hsl, hsla, counter, env, minmax, repeat, hueRotate, fitContent, cubicBezier, linearGradient, radialGradient, conicGradient, repeatingConicGradient, repeatingLinearGradient, repeatingRadialGradient, percent, deg, grad, rad, turn, s, ms, fr, $in, dpi, dpcm, dppx, x, px, pc, pt, cm, mm, Q, ch, ex, em, rem, vw, vh, vmax, vmin, SymbolProxy, css } from '@windijs/helpers';
import { hasKey } from '@windijs/shared';

const funcs = {
    quote,
    attr,
    url,
    $var,
    path,
    hwb,
    dropShadow,
    counters,
    circle,
    ellipse,
    inset,
    polygon,
    matrix,
    matrix3d,
    perspective,
    rotate,
    rotate3d,
    rotateX,
    rotateY,
    rotateZ,
    scale,
    scale3d,
    scaleX,
    scaleY,
    scaleZ,
    skew,
    skewX,
    skewY,
    translate,
    translate3d,
    translateX,
    translateY,
    translateZ,
    steps,
    calc,
    clamp,
    max,
    min,
    abs,
    sign,
    blur,
    brightness,
    contrast,
    grayscale,
    invert,
    opacity,
    saturate,
    sepia,
    rgb,
    rgba,
    hsl,
    hsla,
    counter,
    env,
    minmax,
    repeat,
    hueRotate,
    fitContent,
    cubicBezier,
    linearGradient,
    radialGradient,
    conicGradient,
    repeatingConicGradient,
    repeatingLinearGradient,
    repeatingRadialGradient,
};
const units = {
    percent,
    deg,
    grad,
    rad,
    turn,
    s,
    ms,
    fr,
    $in,
    dpi,
    dpcm,
    dppx,
    x,
    px,
    pc,
    pt,
    cm,
    mm,
    Q,
    ch,
    ex,
    em,
    rem,
    vw,
    vh,
    vmax,
    vmin,
};
function stylePropertyHandler(cfg = {}) {
    const target = { [SymbolProxy]: true };
    const build = (prop, value) => {
        const meta = getMeta();
        if (meta.props.length === 1)
            meta.props.push(value);
        return css(value === "null" || value === "undefined" ? {} : { [prop]: value }, undefined, meta);
    };
    return {
        type: "style",
        get: prop => new Proxy(target, {
            get(_, value) {
                const meta = getMeta();
                resetMeta("style", meta.type, [prop], meta.variants);
                if (hasKey(cfg, prop)) {
                    const cv = cfg[prop];
                    const result = typeof cv === "function" ? cv(value) : handleConfig(v => build(prop, v), cv, "css", value);
                    if (result)
                        return result;
                }
                if (value === "var")
                    return (name, defaultValue) => build(prop, funcs.$var(name, defaultValue));
                if (value === "in")
                    return new Proxy(units.$in, { get: (_, v) => build(prop, units.$in[+v].toString()) });
                if (value in funcs)
                    return (...args) => build(prop, funcs[value](...args));
                if (hasKey(units, value))
                    return new Proxy(units[value], { get: (_, v) => build(prop, units[value][v].toString()) });
                return build(prop, value);
            },
        }),
    };
}

const style = createUtility("style").use(stylePropertyHandler()).init();

export { style, stylePropertyHandler };