@windijs/utilities/dist/windijsUtilities.js

@windijs/utilities

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var config = require('@windijs/config');
var core = require('@windijs/core');
var helpers = require('@windijs/helpers');
var colors$1 = require('@windijs/colors');

var animate = core.createUtility("animate")
    .use(core.animateHandler("none", "none"))
    .use(core.animateHandler("spin", "spin 1s linear infinite", config.spinKeyframes))
    .use(core.animateHandler("ping", "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite", config.pingKeyframes))
    .use(core.animateHandler("pulse", "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", config.pulseKeyframes))
    .use(core.animateHandler("bounce", "bounce 1s infinite", config.bounceKeyframes))
    .use(core.animateHandler("shock", { animation: "shock", transformOrigin: "center bottom" }, config.shockKeyframes))
    .use(core.animateHandler("flash", "flash", config.flashKeyframes))
    .use(core.animateHandler("bubble", "bubble", config.bubbleKeyframes))
    .use(core.animateHandler("rubberBand", "rubberBand", config.rubberBandKeyframes))
    .use(core.animateHandler("shakeX", "shakeX", config.shakeXKeyframes))
    .use(core.animateHandler("shakeY", "shakeY", config.shakeYKeyframes))
    .use(core.animateHandler("headShake", "headShake 1s ease-in-out", config.headShakeKeyframes))
    .use(core.animateHandler("swing", { animation: "swing", transformOrigin: "top center" }, config.swingKeyframes))
    .use(core.animateHandler("tada", "tada", config.tadaKeyframes))
    .use(core.animateHandler("wobble", "wobble", config.wobbleKeyframes))
    .use(core.animateHandler("jello", "jello", config.jelloKeyframes))
    .use(core.animateHandler("heartBeat", "heartBeat 1s ease-in-out", config.heartBeatKeyframes))
    .use(core.animateHandler("hinge", "hinge 2s", config.hingeKeyframes))
    .use(core.animateHandler("jackIn", "jackInTheBox", config.jackInTheBoxKeyframes))
    .use(core.animateHandler("lightSpeedInLeft", "lightSpeedInLeft", config.lightSpeedInLeftKeyframes))
    .use(core.animateHandler("lightSpeedInRight", "lightSpeedInRight", config.lightSpeedInRightKeyframes))
    .use(core.animateHandler("lightSpeedOutLeft", "lightSpeedOutLeft", config.lightSpeedOutLeftKeyframes))
    .use(core.animateHandler("lightSpeedOutRight", "lightSpeedOutRight", config.lightSpeedOutRightKeyframes))
    .use(core.animateHandler("flip", { animation: "flip", backfaceVisibility: "visible" }, config.flipKeyframes))
    .use(core.animateHandler("flipInX", { animation: "flipInX", backfaceVisibility: "visible" }, config.flipInXKeyframes))
    .use(core.animateHandler("flipInY", { animation: "flipInY", backfaceVisibility: "visible" }, config.flipInYKeyframes))
    .use(core.animateHandler("flipOutX", { animation: "flipOutX", backfaceVisibility: "visible" }, config.flipOutXKeyframes))
    .use(core.animateHandler("flipOutY", { animation: "flipOutY", backfaceVisibility: "visible" }, config.flipOutYKeyframes))
    .use(core.animateHandler("rotateIn", "rotateIn", config.rotateInKeyframes))
    .use(core.animateHandler("rotateInDownLeft", "rotateInDownLeft", config.rotateInDownLeftKeyframes))
    .use(core.animateHandler("rotateInDownRight", "rotateInDownRight", config.rotateInDownRightKeyframes))
    .use(core.animateHandler("rotateInUpLeft", "rotateInUpLeft", config.rotateInUpLeftKeyframes))
    .use(core.animateHandler("rotateInUpRight", "rotateInUpRight", config.rotateInUpRightKeyframes))
    .use(core.animateHandler("rotateOut", "rotateOut", config.rotateOutKeyframes))
    .use(core.animateHandler("rotateOutDownLeft", "rotateOutDownLeft", config.rotateOutDownLeftKeyframes))
    .use(core.animateHandler("rotateOutDownRight", "rotateOutDownRight", config.rotateOutDownRightKeyframes))
    .use(core.animateHandler("rotateOutUpLeft", "rotateOutUpLeft", config.rotateOutUpLeftKeyframes))
    .use(core.animateHandler("rotateOutUpRight", "rotateOutUpRight", config.rotateOutUpRightKeyframes))
    .use(core.animateHandler("rollIn", "rollIn", config.rollInKeyframes))
    .use(core.animateHandler("rollOut", "rollOut", config.rollOutKeyframes))
    .use(core.animateHandler("zoomIn", "zoomIn", config.zoomInKeyframes))
    .use(core.animateHandler("zoomInDown", "zoomInDown", config.zoomInDownKeyframes))
    .use(core.animateHandler("zoomInLeft", "zoomInLeft", config.zoomInLeftKeyframes))
    .use(core.animateHandler("zoomInRight", "zoomInRight", config.zoomInRightKeyframes))
    .use(core.animateHandler("zoomInUp", "zoomInUp", config.zoomInUpKeyframes))
    .use(core.animateHandler("bounceIn", "bounceIn 750ms", config.bounceInKeyframes))
    .use(core.animateHandler("bounceInDown", "bounceInDown", config.bounceInDownKeyframes))
    .use(core.animateHandler("bounceInLeft", "bounceInLeft", config.bounceInLeftKeyframes))
    .use(core.animateHandler("bounceInRight", "bounceInRight", config.bounceInRightKeyframes))
    .use(core.animateHandler("bounceInUp", "bounceInUp", config.bounceInUpKeyframes))
    .use(core.animateHandler("bounceOut", "bounceOut 750ms", config.bounceOutKeyframes))
    .use(core.animateHandler("bounceOutDown", "bounceOutDown", config.bounceOutDownKeyframes))
    .use(core.animateHandler("bounceOutLeft", "bounceOutLeft", config.bounceOutLeftKeyframes))
    .use(core.animateHandler("bounceOutRight", "bounceOutRight", config.bounceOutRightKeyframes))
    .use(core.animateHandler("bounceOutUp", "bounceOutUp", config.bounceOutUpKeyframes))
    .use(core.animateHandler("zoomOut", "zoomOut", config.zoomOutKeyframes))
    .use(core.animateHandler("zoomOutDown", "zoomOutDown", config.zoomOutDownKeyframes))
    .use(core.animateHandler("zoomOutLeft", "zoomOutLeft", config.zoomOutLeftKeyframes))
    .use(core.animateHandler("zoomOutRight", "zoomOutRight", config.zoomOutRightKeyframes))
    .use(core.animateHandler("zoomOutUp", "zoomOutUp", config.zoomOutUpKeyframes))
    .use(core.animateHandler("slideInDown", "slideInDown", config.slideInDownKeyframes))
    .use(core.animateHandler("slideInLeft", "slideInLeft", config.slideInLeftKeyframes))
    .use(core.animateHandler("slideInRight", "slideInRight", config.slideInRightKeyframes))
    .use(core.animateHandler("slideInUp", "slideInUp", config.slideInUpKeyframes))
    .use(core.animateHandler("slideOutDown", "slideOutDown", config.slideOutDownKeyframes))
    .use(core.animateHandler("slideOutLeft", "slideOutLeft", config.slideOutLeftKeyframes))
    .use(core.animateHandler("slideOutRight", "slideOutRight", config.slideOutRightKeyframes))
    .use(core.animateHandler("slideOutUp", "slideOutUp", config.slideOutUpKeyframes))
    .use(core.animateHandler("fadeIn", "fadeIn", config.fadeInKeyframes))
    .use(core.animateHandler("fadeInDown", "fadeInDown", config.fadeInDownKeyframes))
    .use(core.animateHandler("fadeInDownBig", "fadeInDownBig", config.fadeInDownBigKeyframes))
    .use(core.animateHandler("fadeInLeft", "fadeInLeft", config.fadeInLeftKeyframes))
    .use(core.animateHandler("fadeInLeftBig", "fadeInLeftBig", config.fadeInLeftBigKeyframes))
    .use(core.animateHandler("fadeInRight", "fadeInRight", config.fadeInRightKeyframes))
    .use(core.animateHandler("fadeInRightBig", "fadeInRightBig", config.fadeInRightBigKeyframes))
    .use(core.animateHandler("fadeInUp", "fadeInUp", config.fadeInUpKeyframes))
    .use(core.animateHandler("fadeInUpBig", "fadeInUpBig", config.fadeInUpBigKeyframes))
    .use(core.animateHandler("fadeInTopLeft", "fadeInTopLeft", config.fadeInTopLeftKeyframes))
    .use(core.animateHandler("fadeInTopRight", "fadeInTopRight", config.fadeInTopRightKeyframes))
    .use(core.animateHandler("fadeInBottomLeft", "fadeInBottomLeft", config.fadeInBottomLeftKeyframes))
    .use(core.animateHandler("fadeInBottomRight", "fadeInBottomRight", config.fadeInBottomRightKeyframes))
    .use(core.animateHandler("fadeOut", "fadeOut", config.fadeOutKeyframes))
    .use(core.animateHandler("fadeOutDown", "fadeOutDown", config.fadeOutDownKeyframes))
    .use(core.animateHandler("fadeOutDownBig", "fadeOutDownBig", config.fadeOutDownBigKeyframes))
    .use(core.animateHandler("fadeOutLeft", "fadeOutLeft", config.fadeOutLeftKeyframes))
    .use(core.animateHandler("fadeOutLeftBig", "fadeOutLeftBig", config.fadeOutLeftBigKeyframes))
    .use(core.animateHandler("fadeOutRight", "fadeOutRight", config.fadeOutRightKeyframes))
    .use(core.animateHandler("fadeOutRightBig", "fadeOutRightBig", config.fadeOutRightBigKeyframes))
    .use(core.animateHandler("fadeOutUp", "fadeOutUp", config.fadeOutUpKeyframes))
    .use(core.animateHandler("fadeOutUpBig", "fadeOutUpBig", config.fadeOutUpBigKeyframes))
    .use(core.animateHandler("backInUp", "backInUp", config.backInUpKeyframes))
    .use(core.animateHandler("backInDown", "backInDown", config.backInDownKeyframes))
    .use(core.animateHandler("backInLeft", "backInLeft", config.backInLeftKeyframes))
    .use(core.animateHandler("backInRight", "backInRight", config.backInRightKeyframes))
    .use(core.animateHandler("backOutUp", "backOutUp", config.backOutUpKeyframes))
    .use(core.animateHandler("backOutDown", "backOutDown", config.backOutDownKeyframes))
    .use(core.animateHandler("backOutLeft", "backOutLeft", config.backOutLeftKeyframes))
    .use(core.animateHandler("backOutRight", "backOutRight", config.backOutRightKeyframes))
    .init();

const aspectBase = {
    position: "relative",
    "> *": {
        position: "absolute",
        height: "100%",
        width: "100%",
        top: "0",
        right: "0",
        bottom: "0",
        left: "0",
    },
};
var aspect = core.createUtility("aspect")
    .use(core.configHandler(config.aspectRatioConfig, "aspectRatio"))
    .case("none", core.cssHandler({
    position: "static",
    paddingBottom: "0",
    "> *": {
        position: "static",
        height: "auto",
        width: "auto",
        top: "auto",
        right: "auto",
        bottom: "auto",
        left: "auto",
    },
}))
    .case("w", core.numberHandler(v => helpers.css({
    "--w-aspect-w": v,
    paddingBottom: "calc(var(--w-aspect-h) / var(--w-aspect-w) * 100%)",
    ...aspectBase,
})))
    .case("h", core.numberHandler(v => helpers.css({
    "--w-aspect-h": v,
})))
    .use(core.genericHandler(v => helpers.css({
    paddingBottom: +v * 100 + "%",
    ...aspectBase,
})))
    .init();

var auto = core.createUtility("auto")
    .case("rows", core.configHandler(config.gridAutoRowsConfig, "gridAutoRows"))
    .case("cols", core.configHandler(config.gridAutoColumnsConfig, "gridAutoColumns"))
    .init();

var backdrop = core.createUtility("backdrop")
    .use(core.cssHandler({
    "--w-backdrop-blur": "var(--w-empty,/*!*/ /*!*/)",
    "--w-backdrop-brightness": "var(--w-empty,/*!*/ /*!*/)",
    "--w-backdrop-contrast": "var(--w-empty,/*!*/ /*!*/)",
    "--w-backdrop-grayscale": "var(--w-empty,/*!*/ /*!*/)",
    "--w-backdrop-hue-rotate": "var(--w-empty,/*!*/ /*!*/)",
    "--w-backdrop-invert": "var(--w-empty,/*!*/ /*!*/)",
    "--w-backdrop-opacity": "var(--tw-empty,/*!*/ /*!*/)",
    "--w-backdrop-saturate": "var(--w-empty,/*!*/ /*!*/)",
    "--w-backdrop-sepia": "var(--w-empty,/*!*/ /*!*/)",
    "-webkit-backdrop-filter": "var(--w-backdrop-blur) var(--w-backdrop-brightness) var(--w-backdrop-contrast) var(--w-backdrop-grayscale) var(--w-backdrop-hue-rotate) var(--w-backdrop-invert) var(--w-backdrop-opacity) var(--w-backdrop-saturate) var(--w-backdrop-sepia)",
    backdropFilter: "var(--w-backdrop-blur) var(--w-backdrop-brightness) var(--w-backdrop-contrast) var(--w-backdrop-grayscale) var(--w-backdrop-hue-rotate) var(--w-backdrop-invert) var(--w-backdrop-opacity) var(--w-backdrop-saturate) var(--w-backdrop-sepia)",
}))
    .case("blur", core.configHandler(config.blurConfig, v => helpers.css({ "--w-backdrop-blur": `blur(${v})` })))
    .case("brightness", core.configHandler(config.brightnessConfig, v => helpers.css({ "--w-backdrop-brightness": `brightness(${v})` })))
    .case("contrast", core.configHandler(config.contrastConfig, v => helpers.css({ "--w-backdrop-contrast": `contrast(${v})` })))
    .case("grayscale", core.configHandler(config.grayscaleConfig, v => helpers.css({ "--w-backdrop-grayscale": `grayscale(${v})` })))
    .case("hueRotate", core.configHandler(config.hueRotateConfig, v => helpers.css({ "--w-backdrop-hue-rotate": `hue-rotate(${v})` })))
    .case("invert", core.configHandler(config.invertConfig, v => helpers.css({ "--w-backdrop-invert": `invert(${v})` })))
    .case("opacity", core.configHandler(config.opacityConfig, v => helpers.css({ "--w-backdrop-opacity": `opacity(${v})` })))
    .case("saturate", core.configHandler(config.saturateConfig, v => helpers.css({ "--w-backdrop-saturate": `saturate(${v})` })))
    .case("sepia", core.configHandler(config.sepiaConfig, v => helpers.css({ "--w-backdrop-sepia": `sepia(${v})` })))
    .init(core.buildBackdropFilter);

var colors = { ...colors$1.baseColors, ...colors$1.windiColors };

var bg = core.createUtility("bg")
    .use(core.colorHandler(colors, "backgroundColor", "--w-bg-opacity"))
    .use(core.configHandler(config.backgroundAttachmentConfig, "backgroundAttachment"))
    .use(core.configHandler(config.backgroundPositionConfig, "backgroundPosition"))
    .use(core.configHandler(config.backgroundRepeatConfig, "backgroundRepeat"))
    .use(core.configHandler(config.backgroundSizeConfig, "backgroundSize"))
    .use(core.configHandler(config.backgroundImageConfig, "backgroundImage"))
    .case("clip", core.configHandler(config.backgroundClipConfig, ["backgroundClip", helpers.prop `-webkit-background-clip`]))
    .case("blend", core.configHandler(config.blendModeConfig, "backgroundBlendMode"))
    .case("origin", core.configHandler(config.backgroundOriginConfig, "backgroundOrigin"))
    .case("opacity", core.configHandler(config.opacityConfig, helpers.prop `--w-bg-opacity`))
    .case("gradient", core.callHandler(core.buildLinearGradient, core.meld(core.configHandler(config.gradientDirectionConfig, core.buildGradientDirection), core.configHandler(config.gradientConfig, "backgroundImage"))))
    .init();

var blend = core.createUtility("blend").use(core.configHandler(config.blendModeConfig, "mixBlendMode")).init();

var blur = core.createUtility("blur")
    .use(core.configHandler(config.blurConfig, v => helpers.css({ "--w-blur": `blur(${v})` })))
    .init(helpers.filters.blur);

var border = core.createUtility("border")
    .use(core.configHandler(config.borderStyleConfig, "borderStyle"))
    .use(core.configHandler(config.borderWidthConfig, "borderWidth"))
    .use(core.colorHandler(colors, "borderColor", "--w-border-opacity"))
    .case("opacity", core.configHandler(config.opacityConfig, helpers.prop `--w-border-opacity`))
    .init();

var brightness = core.createUtility("brightness")
    .use(core.configHandler(config.brightnessConfig, v => helpers.css({ "--w-brightness": `brightness(${v})` })))
    .init(helpers.filters.brightness);

var col = core.createUtility("col")
    .case("start", core.configHandler(config.gridColumnStartConfig, "gridColumnStart"))
    .case("end", core.configHandler(config.gridColumnEndConfig, "gridColumnEnd"))
    .use(core.configHandler(config.gridColumnConfig, "gridColumn"))
    .init();

var container = core.buildContainer(config.screens);

var contrast = core.createUtility("contrast")
    .use(core.configHandler(config.contrastConfig, v => helpers.css({ "--w-contrast": `contrast(${v})` })))
    .init(helpers.filters.contrast);

var decoration = core.createUtility("decoration")
    .use(core.configHandler(config.textDecorationTypeConfig, [helpers.prop `-webkit-text-decoration-line`, "textDecorationLine"]))
    .use(core.configHandler(config.textDecorationStyleConfig, [helpers.prop `-webkit-text-decoration-style`, "textDecorationStyle"]))
    .use(core.configHandler(config.textDecorationThicknessConfig, "textDecorationThickness"))
    .use(core.configHandler(config.boxDecorationBreakConfig, [helpers.prop `-webkit-box-decoration-break`, helpers.prop `box-decoration-break`]))
    .use(core.colorHandler(colors, [helpers.prop `-webkit-text-decoration-color`, "textDecorationColor"], "--w-text-decoration-opacity"))
    .case("opacity", core.configHandler(config.opacityConfig, helpers.prop `--w-text-decoration-opacity`))
    .case("offset", core.configHandler(config.textDecorationOffsetConfig, "textUnderlineOffset"))
    .init();

var delay = core.createUtility("delay")
    .use(core.configHandler(config.transitionDelayConfig, [helpers.prop `-webkit-transition-delay`, helpers.prop `-o-transition-delay`, "transitionDelay"]))
    .init();

var divide = core.createUtility("divide")
    .case("x", core.meld(core.guard("reverse", core.divideXReverseHandler()), core.configHandler(config.borderWidthConfig, core.buildDivideX)))
    .case("y", core.meld(core.guard("reverse", core.divideYReverseHandler()), core.configHandler(config.borderWidthConfig, core.buildDivideY)))
    .case("opacity", core.configHandler(config.opacityConfig, core.buildDivideOpacity))
    .use(core.configHandler(config.borderStyleConfig, core.buildDivideStyle))
    .use(core.colorHandler(colors, core.buildDivideColor))
    .init();

var dropShadow = core.createUtility("dropShadow")
    .use(core.configHandler(config.dropShadowConfig, v => helpers.css({
    "--w-drop-shadow": Array.isArray(v) ? v.map(i => `drop-shadow(${i})`).join(" ") : `drop-shadow(${v})`,
})))
    .init(helpers.filters.dropShadow);

var duration = core.createUtility("duration")
    .use(core.configHandler(config.transitionDurationConfig, [helpers.prop `-webkit-transition-duration`, helpers.prop `-o-transition-duration`, "transitionDuration"]))
    .init();

var ease = core.createUtility("ease")
    .use(core.configHandler(config.transitionTimingFunctionConfig, [
    helpers.prop `-webkit-transition-timing-function`,
    helpers.prop `-o-transition-timing-function`,
    "transitionTimingFunction",
]))
    .init();

var fill = core.createUtility("fill")
    .use(core.colorHandler({ none: "none", ...colors }, "fill"))
    .init();

var filter = core.createUtility("filter")
    .use(core.cssHandler({
    "--w-blur": "var(--w-empty,/*!*/ /*!*/)",
    "--w-brightness": "var(--w-empty,/*!*/ /*!*/)",
    "--w-contrast": "var(--w-empty,/*!*/ /*!*/)",
    "--w-grayscale": "var(--w-empty,/*!*/ /*!*/)",
    "--w-hue-rotate": "var(--w-empty,/*!*/ /*!*/)",
    "--w-invert": "var(--w-empty,/*!*/ /*!*/)",
    "--w-saturate": "var(--w-empty,/*!*/ /*!*/)",
    "--w-sepia": "var(--w-empty,/*!*/ /*!*/)",
    "--w-drop-shadow": "var(--w-empty,/*!*/ /*!*/)",
    "-webkit-filter": "var(--w-blur) var(--w-brightness) var(--w-contrast) var(--w-grayscale) var(--w-hue-rotate) var(--w-invert) var(--w-saturate) var(--w-sepia) var(--w-drop-shadow)",
    filter: "var(--w-blur) var(--w-brightness) var(--w-contrast) var(--w-grayscale) var(--w-hue-rotate) var(--w-invert) var(--w-saturate) var(--w-sepia) var(--w-drop-shadow)",
}))
    .init(core.buildFilter);

var flex = core.createUtility("flex")
    .use(core.cssHandler({ display: ["-webkit-box", "-ms-flexbox", "-webkit-flex", "flex"] }))
    .use(core.configHandler(config.flexDirectionConfig, core.buildFlexDirection))
    .use(core.configHandler(config.flexWrapConfig, [helpers.prop `-ms-flex-wrap`, helpers.prop `-webkit-flex-wrap`, "flexWrap"]))
    .use(core.configHandler(config.flexStretchConfig, core.buildFlexStretch))
    .case("grow", core.configHandler(config.flexGrowConfig, [helpers.prop `-webkit-box-flex`, helpers.prop `-ms-flex-positive`, helpers.prop `-webkit-flex-grow`, "flexGrow"]))
    .case("shrink", core.configHandler(config.flexShrinkConfig, [helpers.prop `-ms-flex-negative`, helpers.prop `-webkit-flex-shrink`, "flexShrink"]))
    .init();

var font = core.createUtility("font")
    .case("normal", core.cssHandler({ fontStyle: "normal", fontWeight: config.fontWeightConfig.normal }))
    .case("antialiased", core.meld(core.cssHandler({
    "-webkit-font-smoothing": "antialiased",
    "-moz-osx-font-smoothing": "grayscale",
}), core.guard("auto", core.cssHandler({
    "-webkit-font-smoothing": "auto",
    "-moz-osx-font-smoothing": "auto",
}))))
    .use(core.fontFamilyHandler(config.fontFamilyConfig))
    .use(core.configHandler(config.fontStyleConfig, "fontStyle"))
    .use(core.configHandler(config.fontWeightConfig, "fontWeight"))
    .use(core.configHandler(config.fontVariantNumericConfig, "fontVariantNumeric"))
    .init();

var from = core.createUtility("from").use(core.colorHandler(colors, core.buildGradientFrom)).init();

var gap = core.createUtility("gap")
    .use(core.configHandler(config.spacingConfig, ["gridGap", "gap"]))
    .case("x", core.configHandler(config.spacingConfig, [helpers.prop `-webkit-column-gap`, helpers.prop `-moz-column-gap`, "gridColumnGap", "columnGap"]))
    .case("y", core.configHandler(config.spacingConfig, [helpers.prop `-webkit-row-gap`, helpers.prop `-moz-row-gap`, "gridRowGap", "rowGap"]))
    .init();

var grayscale = core.createUtility("grayscale")
    .use(core.configHandler(config.grayscaleConfig, v => helpers.css({ "--w-grayscale": `grayscale(${v})` })))
    .init(helpers.filters.grayscale);

var grid = core.createUtility("grid")
    .case("cols", core.configHandler(config.gridTemplateColumnsConfig, "gridTemplateColumns"))
    .case("rows", core.configHandler(config.gridTemplateRowsConfig, "gridTemplateRows"))
    .case("inline", core.cssHandler({ display: ["-ms-inline-grid", "inline-grid"] }))
    .case("flow", core.configHandler(config.gridAutoFlowConfig, "gridAutoFlow"))
    .use(core.cssHandler({ display: ["-ms-grid", "grid"] }))
    .init();

var h = core.createUtility("h")
    .case("min", core.configHandler(config.heightConfig, "minHeight"))
    .case("max", core.configHandler(config.heightConfig, "maxHeight"))
    .use(core.configHandler(config.heightConfig, "height"))
    .init();

var hueRotate = core.createUtility("hueRotate")
    .use(core.configHandler(config.hueRotateConfig, v => helpers.css({ "--w-hue-rotate": `hue-rotate(${v})` })))
    .init(helpers.filters.hueRotate);

var hyphens = core.createUtility("hyphens")
    .use(core.configHandler(config.hyphensConfig, [helpers.prop `-webkit-hyphens`, helpers.prop `-ms-hyphens`, "hyphens"]))
    .init();

var image = core.createUtility("image").case("render", core.configHandler(config.imageRenderingConfig, core.buildImageRendering)).init();

var indent = core.createUtility("indent").use(core.configHandler(config.textIndentConfig, "textIndent")).init();

var invert = core.createUtility("invert")
    .use(core.configHandler(config.invertConfig, v => helpers.css({ "--w-invert": `invert(${v})` })))
    .init(helpers.filters.invert);

var leading = core.createUtility("leading").use(core.configHandler(config.lineHeightConfig, "lineHeight")).init();

var list = core.createUtility("list")
    .use(core.configHandler(config.listStyleTypeConfig, "listStyleType"))
    .use(core.configHandler(config.listStylePositionConfig, "listStylePosition"))
    .init();

var m = core.createUtility("m").use(core.configHandler(config.marginConfig, "margin")).init();

var mb = core.createUtility("mb").use(core.configHandler(config.marginConfig, "marginBottom")).init();

var ml = core.createUtility("ml").use(core.configHandler(config.marginConfig, "marginLeft")).init();

var mr = core.createUtility("mr").use(core.configHandler(config.marginConfig, "marginRight")).init();

var mt = core.createUtility("mt").use(core.configHandler(config.marginConfig, "marginTop")).init();

var mx = core.createUtility("mx")
    .use(core.configHandler(config.marginConfig, ["marginLeft", "marginRight"]))
    .init();

var my = core.createUtility("my")
    .use(core.configHandler(config.marginConfig, ["marginTop", "marginBottom"]))
    .init();

var opacity = core.createUtility("opacity").use(core.configHandler(config.opacityConfig, "opacity")).init();

var origin = core.createUtility("origin")
    .use(core.configHandler(config.transformOriginConfig, [helpers.prop `-webkit-transform-origin`, helpers.prop `-ms-transform-origin`, "transformOrigin"]))
    .init();

var outline = core.createUtility("outline")
    .case("offset", core.configHandler(config.outlineOffsetConfig, "outlineOffset"))
    .case("opacity", core.configHandler(config.opacityConfig, helpers.prop `--w-outline-opacity`))
    .use(core.configHandler(config.borderWidthConfig, "outlineWidth"))
    .use(core.configHandler(config.borderStyleConfig, "outlineStyle"))
    .use(core.colorHandler(colors, "outlineColor", "--w-outline-opacity"))
    .init();

var overflow = core.createUtility("overflow")
    .use(core.configHandler(config.overflowConfig, "overflow"))
    .case("truncate", core.cssHandler({
    overflow: "hidden",
    "-o-text-overflow": "ellipsis",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
}))
    .case("ellipsis", core.cssHandler({ "-o-text-overflow": "ellipsis", textOverflow: "ellipsis" }))
    .case("x", core.configHandler(config.overflowConfig, "overflowX"))
    .case("y", core.configHandler(config.overflowConfig, "overflowY"))
    .init();

var overscroll = core.createUtility("overscroll")
    .use(core.configHandler(config.overscrollConfig, "overscrollBehavior"))
    .case("x", core.configHandler(config.overscrollConfig, "overscrollBehaviorX"))
    .case("y", core.configHandler(config.overscrollConfig, "overscrollBehaviorY"))
    .init();

var p = core.createUtility("p").use(core.configHandler(config.paddingConfig, "padding")).init();

var pb = core.createUtility("pb").use(core.configHandler(config.paddingConfig, "paddingBottom")).init();

var perspect = core.createUtility("perspect")
    .use(core.configHandler(config.perspectiveConfig, [helpers.prop `-webkit-perspective`, "perspective"]))
    .case("origin", core.configHandler(config.perspectiveOriginConfig, [helpers.prop `-webkit-perspective-origin`, "perspectiveOrigin"]))
    .init();

var pl = core.createUtility("pl").use(core.configHandler(config.paddingConfig, "paddingLeft")).init();

var placeholder = core.createUtility("placeholder")
    .use(core.colorHandler(colors, core.buildPlaceholder))
    .case("opacity", core.configHandler(config.opacityConfig, helpers.prop `--w-placeholder-opacity`))
    .init();

var pr = core.createUtility("pr").use(core.configHandler(config.paddingConfig, "paddingRight")).init();

var preserve = core.createUtility("preserve")
    .use(core.configHandler(config.transformStyleConfig, [helpers.prop `-webkit-transform-style`, "transformStyle"]))
    .init();

var pt = core.createUtility("pt").use(core.configHandler(config.paddingConfig, "paddingTop")).init();

var px = core.createUtility("px")
    .use(core.configHandler(config.paddingConfig, ["paddingLeft", "paddingRight"]))
    .init();

var py = core.createUtility("py")
    .use(core.configHandler(config.paddingConfig, ["paddingTop", "paddingBottom"]))
    .init();

var ring = core.createUtility("ring")
    .case("opacity", core.configHandler(config.opacityConfig, helpers.prop `--w-ring-opacity`))
    .case("inset", core.cssHandler({ "--w-ring-inset": "inset" }))
    .case("offset", core.meld(core.colorHandler(colors, helpers.prop `--w-ring-offset-color`, "--w-ring-offset-opacity"), core.configHandler(config.ringOffsetConfig, helpers.prop `--w-ring-offset-width`), core.guard("opacity", core.configHandler(config.opacityConfig, helpers.prop `--w-ring-offset-opacity`))))
    .use(core.colorHandler(colors, helpers.prop `--w-ring-color`, "--w-ring-opacity"))
    .use(core.configHandler(config.borderWidthConfig, core.buildRingWidth))
    .init();

var rotate = core.createUtility("rotate")
    .use(core.configHandler(config.rotateConfig, helpers.prop `--w-rotate`))
    .case("x", core.configHandler(config.rotateConfig, helpers.prop `--w-rotate-x`))
    .case("y", core.configHandler(config.rotateConfig, helpers.prop `--w-rotate-y`))
    .case("z", core.configHandler(config.rotateConfig, helpers.prop `--w-rotate-z`))
    .init(helpers.transforms.rotate);

var rounded = core.createUtility("rounded").use(core.configHandler(config.borderRadiusConfig, "borderRadius")).init();

var row = core.createUtility("row")
    .case("start", core.configHandler(config.gridRowStartConfig, "gridRowStart"))
    .case("end", core.configHandler(config.gridRowEndConfig, "gridRowEnd"))
    .use(core.configHandler(config.gridRowConfig, "gridRow"))
    .init();

var saturate = core.createUtility("saturate")
    .use(core.configHandler(config.saturateConfig, v => helpers.css({ "--w-saturate": `saturate(${v})` })))
    .init(helpers.filters.saturate);

var scale = core.createUtility("scale")
    .use(core.configHandler(config.scaleConfig, [helpers.prop `--w-scale-x`, helpers.prop `--w-scale-y`, helpers.prop `--w-scale-z`]))
    .case("x", core.configHandler(config.scaleConfig, helpers.prop `--w-scale-x`))
    .case("y", core.configHandler(config.scaleConfig, helpers.prop `--w-scale-y`))
    .case("z", core.configHandler(config.scaleConfig, helpers.prop `--w-scale-z`))
    .init(helpers.transforms.scale);

var sepia = core.createUtility("sepia")
    .use(core.configHandler(config.sepiaConfig, v => helpers.css({ "--w-sepia": `sepia(${v})` })))
    .init(helpers.filters.sepia);

var shadow = core.createUtility("shadow")
    .use(core.configHandler(config.boxShadowConfig, core.buildBoxShadowSize))
    .use(core.colorHandler(colors, core.buildBoxShadowColor))
    .case("opacity", core.configHandler(config.opacityConfig, helpers.prop `--w-shadow-color-opacity`))
    .init();

var skew = core.createUtility("skew")
    .use(core.configHandler(config.skewConfig, [helpers.prop `--w-skew-x`, helpers.prop `--w-skew-y`]))
    .case("x", core.configHandler(config.skewConfig, helpers.prop `--w-skew-x`))
    .case("y", core.configHandler(config.skewConfig, helpers.prop `--w-skew-y`))
    .init(helpers.transforms.skew);

var space = core.createUtility("space")
    .case("x", core.meld(core.guard("reverse", core.spaceBetweenXReverseHandler()), core.configHandler(config.spaceBetweenConfig, core.buildSpaceBetweenX)))
    .case("y", core.meld(core.guard("reverse", core.spaceBetweenYReverseHandler()), core.configHandler(config.spaceBetweenConfig, core.buildSpaceBetweenY)))
    .init();

var sr = core.createUtility("sr")
    .case("only", core.cssHandler({
    position: "absolute",
    width: "1px",
    height: "1px",
    padding: "0",
    margin: "-1px",
    overflow: "hidden",
    clip: "rect(0, 0, 0, 0)",
    whiteSpace: "nowrap",
    borderWidth: "0",
}))
    .case("normal", core.cssHandler({
    position: "static",
    width: "auto",
    height: "auto",
    padding: "0",
    margin: "0",
    overflow: "visible",
    clip: "auto",
    whiteSpace: "normal",
}))
    .init();

var stroke = core.createUtility("stroke")
    .use(core.colorHandler({ none: "none", ...colors }, "stroke"))
    .case("dash", core.numberHandler("strokeDasharray"))
    .case("offset", core.numberHandler("strokeDashoffset"))
    .case("cap", core.configHandler(config.strokeLineCapConfig, "strokeLinecap"))
    .case("join", core.configHandler(config.strokeLineJoinConfig, "strokeLinejoin"))
    .use(core.numberHandler("strokeWidth"))
    .init();

var tab = core.createUtility("tab")
    .use(core.configHandler(config.tabSizeConfig, [helpers.prop `-moz-tab-size`, helpers.prop `-o-tab-size`, "tabSize"]))
    .init();

var text = core.createUtility("text")
    .use(core.fontSizeHandler(config.fontSizeConfig))
    .use(core.configHandler(config.textAlignConfig, "textAlign"))
    .use(core.configHandler(config.verticalAlignConfig, "verticalAlign"))
    .use(core.configHandler(config.textTransformConfig, "textTransform"))
    .use(core.colorHandler(colors, "color", "--w-text-opacity"))
    .case("opacity", core.configHandler(config.opacityConfig, helpers.prop `--w-text-opacity`))
    .case("shadow", core.configHandler(config.textShadowConfig, "textShadow"))
    .case("stroke", core.meld(core.configHandler(config.textStrokeWidthConfig, helpers.prop `-webkit-text-stroke-width`), core.colorHandler(colors, helpers.prop `-webkit-text-stroke-color`, "--w-text-stroke-opacity"), core.pxHandler(helpers.prop `-webkit-text-stroke-width`), core.guard("opacity", core.configHandler(config.opacityConfig, helpers.prop `--w-text-stroke-opacity`))))
    .case("space", core.configHandler(config.whiteSpaceConfig, "whiteSpace"))
    .case("break", core.meld(core.guard("normal", core.cssHandler({ wordBreak: "normal", overflowWrap: "normal" })), core.guard("words", core.cssHandler({ overflowWrap: "break-word" })), core.guard("all", core.cssHandler({ wordBreak: "break-all" }))))
    .init();

var to = core.createUtility("to").use(core.colorHandler(colors, core.buildGradientTo)).init();

var tracking = core.createUtility("tracking").use(core.configHandler(config.letterSpacingConfig, "letterSpacing")).init();

var transform = core.createUtility("transform")
    .use(core.cssHandler({
    "--w-translate-x": "0",
    "--w-translate-y": "0",
    "--w-translate-z": "0",
    "--w-rotate": "0",
    "--w-rotate-x": "0",
    "--w-rotate-y": "0",
    "--w-rotate-z": "0",
    "--w-skew-x": "0",
    "--w-skew-y": "0",
    "--w-scale-x": "1",
    "--w-scale-y": "1",
    "--w-scale-z": "1",
    "-webkit-transform": "translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))",
    "-ms-transform": "translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))",
    transform: "translateX(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotateZ(var(--w-rotate-z)) skewX(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))",
}))
    .init(core.buildTransform);

var transition = core.createUtility("transition")
    .use(core.configHandler(config.transitionPropertyConfig, v => {
    const timef = config.transitionTimingFunctionConfig.DEFAULT;
    const dur = config.transitionDurationConfig.DEFAULT;
    if (v === "none")
        return helpers.css({ transitionProperty: "none" });
    if (typeof v === "string")
        return helpers.css({
            transitionProperty: v,
            "-webkit-transition-timing-function": timef,
            "-o-transition-timing-function": timef,
            transitionTimingFunction: timef,
            "-webkit-transition-duration": dur,
            "-o-transition-duration": dur,
            transitionDuration: dur,
        });
}))
    .init(core.buildTransition);

var translate = core.createUtility("translate")
    .use(core.configHandler(config.translateConfig, [helpers.prop `--w-translate-x`, helpers.prop `--w-translate-y`, helpers.prop `--w-translate-z`]))
    .case("x", core.configHandler(config.translateConfig, helpers.prop `--w-translate-x`))
    .case("y", core.configHandler(config.translateConfig, helpers.prop `--w-translate-y`))
    .case("z", core.configHandler(config.translateConfig, helpers.prop `--w-translate-z`))
    .init(helpers.transforms.translate);

var via = core.createUtility("via").use(core.colorHandler(colors, core.buildGradientVia)).init();

var w = core.createUtility("w")
    .case("min", core.configHandler(config.widthConfig, "minWidth"))
    .case("max", core.configHandler(config.widthConfig, "maxWidth"))
    .use(core.configHandler(config.widthConfig, "width"))
    .init();

var write = core.createUtility("write")
    .use(core.configHandler(config.writingModeConfig, core.buildWritingMode))
    .use(core.configHandler(config.writingOrientationConfig, [helpers.prop `-webkit-text-orientation`, "textOrientation"]))
    .init();

exports.animate = animate;
exports.aspect = aspect;
exports.auto = auto;
exports.backdrop = backdrop;
exports.bg = bg;
exports.blend = blend;
exports.blur = blur;
exports.border = border;
exports.brightness = brightness;
exports.col = col;
exports.colors = colors;
exports.container = container;
exports.contrast = contrast;
exports.decoration = decoration;
exports.delay = delay;
exports.divide = divide;
exports.dropShadow = dropShadow;
exports.duration = duration;
exports.ease = ease;
exports.fill = fill;
exports.filter = filter;
exports.flex = flex;
exports.font = font;
exports.from = from;
exports.gap = gap;
exports.grayscale = grayscale;
exports.grid = grid;
exports.h = h;
exports.hueRotate = hueRotate;
exports.hyphens = hyphens;
exports.image = image;
exports.indent = indent;
exports.invert = invert;
exports.leading = leading;
exports.list = list;
exports.m = m;
exports.mb = mb;
exports.ml = ml;
exports.mr = mr;
exports.mt = mt;
exports.mx = mx;
exports.my = my;
exports.opacity = opacity;
exports.origin = origin;
exports.outline = outline;
exports.overflow = overflow;
exports.overscroll = overscroll;
exports.p = p;
exports.pb = pb;
exports.perspect = perspect;
exports.pl = pl;
exports.placeholder = placeholder;
exports.pr = pr;
exports.preserve = preserve;
exports.pt = pt;
exports.px = px;
exports.py = py;
exports.ring = ring;
exports.rotate = rotate;
exports.rounded = rounded;
exports.row = row;
exports.saturate = saturate;
exports.scale = scale;
exports.sepia = sepia;
exports.shadow = shadow;
exports.skew = skew;
exports.space = space;
exports.sr = sr;
exports.stroke = stroke;
exports.tab = tab;
exports.text = text;
exports.to = to;
exports.tracking = tracking;
exports.transform = transform;
exports.transition = transition;
exports.translate = translate;
exports.via = via;
exports.w = w;
exports.write = write;