xmlui 0.7.29 → 0.7.31

package/dist/scripts/src/parsers/style-parser/style-compiler.js

@@ -1,562 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.compileLayout = compileLayout;
-const lodash_es_1 = require("lodash-es");
-const constants_1 = require("../../components-core/constants");
-const StyleParser_1 = require("./StyleParser");
-const defaultCompResult = {
-    cssProps: {},
-    nonCssProps: {},
-};
-// Compile style properties into an object that can be directly used as the "style" attribute of elements
-function compileLayout(layoutProps = constants_1.EMPTY_OBJECT, themeVars, layoutContext) {
-    var _a, _b, _c, _d, _e, _f;
-    const result = {
-        cssProps: {},
-        nonCssProps: {},
-    };
-    const css = result.cssProps;
-    // --- Compile alignment
-    const horizontalAlignment = compileAlignment("horizontalAlignment", layoutProps);
-    if (horizontalAlignment) {
-        result.nonCssProps.horizontalAlignment = horizontalAlignment;
-    }
-    const verticalAlignment = compileAlignment("verticalAlignment", layoutProps);
-    if (verticalAlignment) {
-        result.nonCssProps.verticalAlignment = verticalAlignment;
-    }
-    const orientation = compileOrientation("orientation", layoutProps);
-    if (orientation) {
-        result.nonCssProps.orientation = orientation;
-    }
-    // --- Compile dimensions
-    if (!!getOrientation(layoutContext)) {
-        // --- In a container, we always use "flex-shrink: 0"
-        css.flexShrink = 0;
-    }
-    const widthResult = compileSize("width", layoutProps);
-    if (widthResult.value)
-        css.width = widthResult.value;
-    if (isHorizontalAndStartSize(widthResult, layoutContext)) {
-        // --- In a horizontal container, we use "flex" when width is in start-size
-        css.flex = widthResult.ratio;
-        css.flexShrink = 1; //if it's star sizing, we allow shrinking
-    }
-    const minWidthResult = compileSize("minWidth", layoutProps);
-    if (minWidthResult.value)
-        css.minWidth = minWidthResult.value;
-    const maxWidthResult = compileSize("maxWidth", layoutProps);
-    if (maxWidthResult.value)
-        css.maxWidth = maxWidthResult.value;
-    const heightResult = compileSize("height", layoutProps);
-    if (heightResult.value)
-        css.height = heightResult.value;
-    if (isVerticalAndStarSize(heightResult, layoutContext)) {
-        // --- In a vertical container, we use "flex" when height is in star-size
-        css.flex = heightResult.ratio;
-        css.flexShrink = 1;
-    }
-    const minHeightResult = compileSize("minHeight", layoutProps);
-    if (minHeightResult.value)
-        css.minHeight = minHeightResult.value;
-    const maxHeightResult = compileSize("maxHeight", layoutProps);
-    if (maxHeightResult.value)
-        css.maxHeight = maxHeightResult.value;
-    // --- Compile positions
-    const top = compileSize("top", layoutProps);
-    if (top.value)
-        css.top = top.value;
-    const right = compileSize("right", layoutProps);
-    if (right.value)
-        css.right = right.value;
-    const bottom = compileSize("bottom", layoutProps);
-    if (bottom.value)
-        css.bottom = bottom.value;
-    const left = compileSize("left", layoutProps);
-    if (left.value)
-        css.left = left.value;
-    // --- Compile gap
-    const gap = compileSize("gap", layoutProps);
-    if (gap.value)
-        css.gap = gap.value;
-    // --- Compile border
-    const border = compileBorder("border", layoutProps);
-    if (border)
-        css.border = border;
-    const borderTop = compileBorder("borderTop", layoutProps);
-    if (borderTop)
-        css.borderTop = borderTop;
-    const borderRight = compileBorder("borderRight", layoutProps);
-    if (borderRight)
-        css.borderRight = borderRight;
-    const borderBottom = compileBorder("borderBottom", layoutProps);
-    if (borderBottom)
-        css.borderBottom = borderBottom;
-    const borderLeft = compileBorder("borderLeft", layoutProps);
-    if (borderLeft)
-        css.borderLeft = borderLeft;
-    const borderColor = compileColor("borderColor", layoutProps);
-    if (borderColor)
-        css.borderColor = borderColor;
-    const borderStyle = compileBorderStyle("borderStyle", layoutProps);
-    if (borderStyle)
-        css.borderStyle = borderStyle;
-    const borderThickness = compileSize("borderThickness", layoutProps);
-    if (borderThickness.value)
-        css.borderWidth = borderThickness.value;
-    // --- Compile radius
-    const radius = compileRadius("radius", layoutProps);
-    if (radius)
-        css.borderRadius = radius;
-    const radiusTopLeft = compileRadius("radiusTopLeft", layoutProps);
-    if (radiusTopLeft)
-        css.borderTopLeftRadius = radiusTopLeft;
-    const radiusTopRight = compileRadius("radiusTopRight", layoutProps);
-    if (radiusTopRight)
-        css.borderTopRightRadius = radiusTopRight;
-    const radiusBottomLeft = compileRadius("radiusBottomLeft", layoutProps);
-    if (radiusBottomLeft)
-        css.borderBottomLeftRadius = radiusBottomLeft;
-    const radiusBottomRight = compileRadius("radiusBottomRight", layoutProps);
-    if (radiusBottomRight)
-        css.borderBottomRightRadius = radiusBottomRight;
-    // --- Compile padding
-    const padding = compileSize("padding", layoutProps);
-    if (padding.value)
-        css.padding = padding.value;
-    const horizontalPadding = compileSize("horizontalPadding", layoutProps);
-    const verticalPadding = compileSize("verticalPadding", layoutProps);
-    const paddingLeft = mergeSizes(compileSize("paddingLeft", layoutProps), horizontalPadding);
-    if (paddingLeft.value)
-        css.paddingLeft = paddingLeft.value;
-    const paddingRight = mergeSizes(compileSize("paddingRight", layoutProps), horizontalPadding);
-    if (paddingRight.value)
-        css.paddingRight = paddingRight.value;
-    const paddingTop = mergeSizes(compileSize("paddingTop", layoutProps), verticalPadding);
-    if (paddingTop.value)
-        css.paddingTop = paddingTop.value;
-    const paddingBottom = mergeSizes(compileSize("paddingBottom", layoutProps), verticalPadding);
-    if (paddingBottom.value)
-        css.paddingBottom = paddingBottom.value;
-    // --- Compile margin
-    const margin = compileMargin("margin", layoutProps);
-    if (margin)
-        css.margin = margin;
-    const horizontalMargin = compileMargin("horizontalMargin", layoutProps);
-    const verticalMargin = compileMargin("verticalMargin", layoutProps);
-    const marginLeft = (_a = compileMargin("marginLeft", layoutProps)) !== null && _a !== void 0 ? _a : horizontalMargin;
-    if (marginLeft)
-        css.marginLeft = marginLeft;
-    const marginRight = (_b = compileMargin("marginRight", layoutProps)) !== null && _b !== void 0 ? _b : horizontalMargin;
-    if (marginRight)
-        css.marginRight = marginRight;
-    const marginTop = (_c = compileMargin("marginTop", layoutProps)) !== null && _c !== void 0 ? _c : verticalMargin;
-    if (marginTop)
-        css.marginTop = marginTop;
-    const marginBottom = (_d = compileMargin("marginBottom", layoutProps)) !== null && _d !== void 0 ? _d : verticalMargin;
-    if (marginBottom)
-        css.marginBottom = marginBottom;
-    // --- Compile other
-    const backgroundColor = compileColor("backgroundColor", layoutProps);
-    if (backgroundColor)
-        css.backgroundColor = backgroundColor;
-    const background = compileBackground("background", layoutProps);
-    if (background)
-        css.background = background;
-    const boxShadow = compileShadow("shadow", layoutProps);
-    if (boxShadow)
-        css.boxShadow = boxShadow;
-    const direction = compileDirection("direction", layoutProps);
-    if (direction)
-        css.direction = direction;
-    const overflowX = compileScrolling("horizontalOverflow", layoutProps);
-    if (overflowX)
-        css.overflowX = overflowX;
-    const overflowY = compileScrolling("verticalOverflow", layoutProps);
-    if (overflowY)
-        css.overflowY = overflowY;
-    const zIndex = compileZIndex("zIndex", layoutProps);
-    if (zIndex)
-        css.zIndex = zIndex;
-    const opacity = compileOpacity("opacity", layoutProps);
-    if (opacity)
-        css.opacity = opacity;
-    const zoom = compileZoom("zoom", layoutProps);
-    if (zoom)
-        css.zoom = zoom;
-    // --- Compile typography
-    const color = compileColor("color", layoutProps);
-    if (color)
-        css.color = color;
-    const fontFamily = compileFontFamily("fontFamily", layoutProps);
-    if (fontFamily)
-        css.fontFamily = fontFamily;
-    const fontSize = compileSize("fontSize", layoutProps);
-    if (fontSize.value)
-        css.fontSize = fontSize.value;
-    const fontWeight = compileFontWeight("fontWeight", layoutProps);
-    if (fontWeight)
-        css.fontWeight = fontWeight;
-    const fontStyle = compileItalic("italic", layoutProps);
-    if (fontStyle)
-        css.fontStyle = fontStyle;
-    const textDecoration = compileTextDecoration("textDecoration", layoutProps);
-    if (textDecoration)
-        css.textDecoration = textDecoration;
-    const userSelect = compileUserSelect("userSelect", layoutProps);
-    if (userSelect)
-        css.userSelect = userSelect;
-    const letterSpacing = compileSize("letterSpacing", layoutProps);
-    if (letterSpacing.value)
-        css.letterSpacing = letterSpacing.value;
-    const textTransform = compileTextTransform("textTransform", layoutProps);
-    if (textTransform)
-        css.textTransform = textTransform;
-    const lineHeight = compileLineHeight("lineHeight", layoutProps);
-    if (lineHeight)
-        css.lineHeight = lineHeight;
-    const textAlign = compileTextAlign("textAlign", layoutProps);
-    if (textAlign)
-        css.textAlign = textAlign;
-    const textAlignLast = compileTextAlign("textAlignLast", layoutProps);
-    if (textAlignLast)
-        css.textAlignLast = textAlignLast;
-    const textWrap = (_e = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.textWrap) === null || _e === void 0 ? void 0 : _e.toString();
-    if (textWrap)
-        css.textWrap = textWrap;
-    const whiteSpace = (_f = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.whiteSpace) === null || _f === void 0 ? void 0 : _f.toString();
-    if (whiteSpace) {
-        css.whiteSpace = whiteSpace;
-    }
-    // --- Compile content rendering
-    const wrapContent = compileWrapContent("wrapContent", layoutProps);
-    if (wrapContent)
-        css.flexWrap = wrapContent;
-    const canShrink = compileCanShrink("canShrink", layoutProps);
-    if (canShrink)
-        css.flexShrink = canShrink;
-    // --- Other
-    const cursor = compileCursor("cursor", layoutProps);
-    if (cursor)
-        css.cursor = cursor;
-    // --- Done
-    //if we didn't set any props, return a referentially stable result
-    if ((0, lodash_es_1.isEmpty)(result.cssProps) && (0, lodash_es_1.isEmpty)(result.nonCssProps) && (0, lodash_es_1.isEmpty)(result.issues)) {
-        return defaultCompResult;
-    }
-    return result;
-    function mergeSizes(size, defSize) {
-        return size.value ? size : defSize;
-    }
-    function getThemeVar(themeVar) {
-        return themeVars === null || themeVars === void 0 ? void 0 : themeVars[themeVar.id.substring(1)];
-    }
-    function isCssVarResolved(themeVar) {
-        const varValue = getThemeVar(themeVar);
-        if (varValue === undefined || varValue === "") {
-            return false;
-        }
-        return true;
-    }
-    function compile(propName, layoutProps, parseFn, convertFn) {
-        var _a, _b, _c, _d;
-        const defValue = compileSingleProperty();
-        if (((_a = layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.mediaSize) === null || _a === void 0 ? void 0 : _a.sizeIndex) !== undefined) {
-            const sizeIndex = (_b = layoutContext.mediaSize) === null || _b === void 0 ? void 0 : _b.sizeIndex;
-            const xsValue = compileSingleProperty("xs");
-            const smValue = compileSingleProperty("sm");
-            const mdValue = compileSingleProperty("md");
-            const lgValue = compileSingleProperty("lg");
-            const xlValue = compileSingleProperty("xl");
-            const xxlValue = compileSingleProperty("xxl");
-            let mergedValue;
-            switch (sizeIndex) {
-                case 0: // xs
-                    mergedValue = (_c = xsValue !== null && xsValue !== void 0 ? xsValue : smValue) !== null && _c !== void 0 ? _c : mdValue;
-                    break;
-                case 1: // sm
-                    mergedValue = smValue !== null && smValue !== void 0 ? smValue : mdValue;
-                    break;
-                case 2: // md
-                    mergedValue = mdValue;
-                    break;
-                case 3: // lg
-                    mergedValue = lgValue;
-                    break;
-                case 4: // xl
-                    mergedValue = xlValue !== null && xlValue !== void 0 ? xlValue : lgValue;
-                    break;
-                case 5: // xxl
-                    mergedValue = (_d = xxlValue !== null && xxlValue !== void 0 ? xxlValue : xlValue) !== null && _d !== void 0 ? _d : lgValue;
-                    break;
-            }
-            return mergedValue !== null && mergedValue !== void 0 ? mergedValue : defValue;
-        }
-        return defValue;
-        function compileSingleProperty(sizeSpec) {
-            var _a, _b, _c;
-            const source = (_a = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps[propName + (sizeSpec ? `-${sizeSpec}` : "")]) === null || _a === void 0 ? void 0 : _a.toString();
-            if (!source)
-                return undefined;
-            const parser = new StyleParser_1.StyleParser(source);
-            try {
-                const node = parseFn(parser);
-                if (!node)
-                    return source;
-                if (!parser.testCompleted()) {
-                    (_b = result.issues) !== null && _b !== void 0 ? _b : (result.issues = {});
-                    result.issues[propName] = `Unexpected tail after the ${propName}`;
-                    return source;
-                }
-                if (node.themeId) {
-                    return (0, StyleParser_1.toCssVar)(node.themeId);
-                }
-                return convertFn(node);
-            }
-            catch (err) {
-                (_c = result.issues) !== null && _c !== void 0 ? _c : (result.issues = {});
-                result.issues[propName] = err === null || err === void 0 ? void 0 : err.toString();
-                return source;
-            }
-        }
-    }
-    // --- Compiles an alignment definition into a CSS size property
-    function compileAlignment(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseAlignment(), (n) => n.value);
-    }
-    // --- Compiles an alignment definition into a CSS size property
-    function compileTextAlign(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseTextAlign(), (n) => n.value);
-    }
-    // --- Compiles a user select definition into a CSS size property
-    function compileUserSelect(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseUserSelect(), (n) => n.value);
-    }
-    // --- Compiles a text transform definition into a CSS size property
-    function compileTextTransform(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseTextTransform(), (n) => n.value);
-    }
-    function compileOrientation(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseOrientation(), (n) => n.value);
-    }
-    // --- Compiles a size definition into a CSS size property
-    function compileLineHeight(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseLineHeight(), (n) => `${n.value}${n.unit}`);
-    }
-    // --- Compiles an opacity definition into a CSS opacity property
-    function compileOpacity(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseOpacity(), (n) => `${n.value}${n.unit}`);
-    }
-    // --- Compiles an opacity definition into a CSS opacity property
-    function compileZoom(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseZoom(), (n) => { var _a; return `${n.value}${(_a = n.unit) !== null && _a !== void 0 ? _a : ""}`; });
-    }
-    // --- Compiles a size definition into a CSS size property
-    function compileSize(propName, layoutProps) {
-        let isStarSize = false;
-        let ratio;
-        let value = compile(propName, layoutProps, (p) => {
-            var _a;
-            const sizeNode = p.parseSize();
-            isStarSize = (sizeNode === null || sizeNode === void 0 ? void 0 : sizeNode.unit) === "*";
-            if (isStarSize) {
-                ratio = (_a = sizeNode === null || sizeNode === void 0 ? void 0 : sizeNode.value) !== null && _a !== void 0 ? _a : 1;
-            }
-            return sizeNode;
-        }, (n) => { var _a; return (_a = n.extSize) !== null && _a !== void 0 ? _a : `${n.value}${n.unit}`; });
-        return {
-            value: value ? replaceThemeVar(value) : undefined,
-            ratio,
-            isStarSize,
-        };
-    }
-    // --- Compiles a size definition into a CSS size property
-    function compileMargin(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseMargin(), (n) => { var _a; return (_a = n.extSize) !== null && _a !== void 0 ? _a : `${n.value}${n.unit}`; });
-    }
-    // --- Compiles a zIndex definition into a CSS zIndex property
-    function compileZIndex(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseZIndex(), (n) => n.value.toString());
-    }
-    function compileScrolling(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseScrolling(), (n) => n.value);
-    }
-    function compileDirection(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseDirection(), (n) => n.value);
-    }
-    function compileCursor(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseCursor(), (n) => n.value);
-    }
-    function compileFontWeight(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseFontWeight(), (n) => { var _a; return (_a = n.value) === null || _a === void 0 ? void 0 : _a.toString(); });
-    }
-    function compileFontFamily(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseFontFamily(), (n) => n.value);
-    }
-    function compileColor(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseColor(), (n) => n.value !== undefined
-            ? typeof n.value === "number"
-                ? `#${n.value.toString(16).padStart(8, "0")}`
-                : n.value
-            : undefined);
-    }
-    function compileBackground(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseColor(), (n) => n.value !== undefined
-            ? typeof n.value === "number"
-                ? `#${n.value.toString(16).padStart(8, "0")}`
-                : n.value
-            : undefined);
-    }
-    function hasOnlyUnresolvedVars(...themeIds) {
-        let definedThemeIds = themeIds.filter((id) => id !== undefined);
-        if (!definedThemeIds.length) {
-            return false;
-        }
-        for (let i = 0; i < definedThemeIds.length; i++) {
-            const themeId = definedThemeIds[i];
-            if (isCssVarResolved(themeId)) {
-                return false;
-            }
-            if (themeId.defaultValue) {
-                const hasStringDefaultValue = themeId.defaultValue.find((value) => typeof value === "string") !== undefined;
-                if (hasStringDefaultValue) {
-                    return false;
-                }
-                const themeVarDefaultValues = themeId.defaultValue.filter((value) => typeof value !== "string");
-                if (!hasOnlyUnresolvedVars(...themeVarDefaultValues)) {
-                    return false;
-                }
-            }
-        }
-        return true;
-    }
-    function compileBorder(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseBorder(), (n) => {
-            var _a, _b, _c;
-            if (hasOnlyUnresolvedVars(n.themeId1, n.themeId2, n.themeId3)) {
-                return undefined;
-            }
-            return ((`${n.themeId1 ? (0, StyleParser_1.toCssVar)(n.themeId1) : ""} ` +
-                `${n.themeId2 ? (0, StyleParser_1.toCssVar)(n.themeId2) : ""} ` +
-                `${n.themeId3 ? (0, StyleParser_1.toCssVar)(n.themeId3) : ""}`).trim() +
-                " " +
-                `${(_a = n.widthValue) !== null && _a !== void 0 ? _a : ""}${(_b = n.widthUnit) !== null && _b !== void 0 ? _b : ""}` +
-                `${n.widthValue && n.styleValue ? " " : ""}` +
-                `${(_c = n.styleValue) !== null && _c !== void 0 ? _c : ""}` +
-                `${(n.widthValue || n.styleValue) && n.color ? " " : ""}` +
-                `${n.color !== undefined
-                    ? typeof n.color === "number"
-                        ? `#${n.color.toString(16).padStart(8, "0")}`
-                        : n.color
-                    : ""}`).trim();
-        });
-    }
-    function compileBorderStyle(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseBorderStyle(), (n) => n.value);
-    }
-    function compileTextDecoration(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseTextDecoration(), (n) => {
-            var _a, _b, _c;
-            if (n.none) {
-                return "none";
-            }
-            if (hasOnlyUnresolvedVars(n.themeId1, n.themeId2, n.themeId3)) {
-                return undefined;
-            }
-            return ((`${n.themeId1 ? (0, StyleParser_1.toCssVar)(n.themeId1) : ""} ` +
-                `${n.themeId2 ? (0, StyleParser_1.toCssVar)(n.themeId2) : ""} ` +
-                `${n.themeId3 ? (0, StyleParser_1.toCssVar)(n.themeId3) : ""}`).trim() +
-                " " +
-                `${(_a = n.line) !== null && _a !== void 0 ? _a : ""}` +
-                `${n.line && n.style ? " " : ""}` +
-                `${(_b = n.style) !== null && _b !== void 0 ? _b : ""}` +
-                `${(n.line || n.style) && n.color ? " " : ""}` +
-                `${(_c = n.color) !== null && _c !== void 0 ? _c : ""}`).trim();
-        });
-    }
-    function compileRadius(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseRadius(), (n) => {
-            var _a, _b, _c, _d;
-            if (hasOnlyUnresolvedVars(n.themeId1, n.themeId2)) {
-                return undefined;
-            }
-            const theme1 = `${n.themeId1 ? (0, StyleParser_1.toCssVar)(n.themeId1) : ""}`;
-            const value1 = `${(_a = n.value1) !== null && _a !== void 0 ? _a : ""}${(_b = n.unit1) !== null && _b !== void 0 ? _b : ""}`;
-            const theme2 = `${n.themeId2 ? (0, StyleParser_1.toCssVar)(n.themeId2) : ""}`;
-            const value2 = `${(_c = n.value2) !== null && _c !== void 0 ? _c : ""}${(_d = n.unit2) !== null && _d !== void 0 ? _d : ""}`;
-            let part = `${theme1}${value1}`;
-            let part2 = `${theme2}${value2}`;
-            part += part2 ? " / " + part2 : "";
-            return part.trim();
-        });
-    }
-    function compileShadow(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseShadow(), (n) => {
-            var _a;
-            let css = "";
-            for (const sg of (_a = n.segments) !== null && _a !== void 0 ? _a : []) {
-                if (css) {
-                    css += ", ";
-                }
-                css += sg.inset ? "inset " : "";
-                css += `${sg.offsetXValue}${sg.offsetXUnit} ${sg.offsetYValue}${sg.offsetYUnit}`;
-                if (sg.blurRadiusValue !== undefined) {
-                    css += ` ${sg.blurRadiusValue}${sg.blurRadiusUnit}`;
-                }
-                if (sg.spreadRadiusValue !== undefined) {
-                    css += ` ${sg.spreadRadiusValue}${sg.spreadRadiusUnit}`;
-                }
-                if (sg.color !== undefined) {
-                    css += ` ${sg.color}`;
-                }
-            }
-            return css;
-        });
-    }
-    // --- Compiles a Boolean definition into a CSS font-style size property
-    function compileItalic(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseBoolean(), (n) => (n.value ? "italic" : "normal"));
-    }
-    // --- Compiles a Boolean definition into a CSS flex-wrap property
-    function compileWrapContent(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseBoolean(), (n) => (n.value ? "wrap" : "nowrap"));
-    }
-    // --- Compiles a Boolean definition into a CSS flex-shrink property
-    function compileCanShrink(propName, layoutProps) {
-        return compile(propName, layoutProps, (p) => p.parseBoolean(), (n) => (n.value ? "1" : "0"));
-    }
-    function isHorizontalAndStartSize(size, layoutContext) {
-        if (!size.value)
-            return false;
-        const orientation = getOrientation(layoutContext);
-        return orientation === "horizontal" && size.isStarSize;
-    }
-    function isVerticalAndStarSize(size, layoutContext) {
-        if (!size.value)
-            return false;
-        const orientation = getOrientation(layoutContext);
-        return orientation === "vertical" && size.isStarSize;
-    }
-    function getOrientation(layoutContext) {
-        if (!layoutContext)
-            return;
-        let orientation = (layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.type) === "Stack" && (layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.orientation);
-        return orientation === null || orientation === void 0 ? void 0 : orientation.toString();
-    }
-    function replaceThemeVar(input) {
-        const regex = /\$([a-zA-Z0-9_-]+)/gi;
-        let matches = input.matchAll(regex);
-        // --- We go from 1, because result[1] is the whole stuff
-        if (matches) {
-            let ret = input;
-            for (let match of matches) {
-                const varName = match[0];
-                if (varName) {
-                    ret = ret.replace(match[0], (0, StyleParser_1.toCssVar)(varName));
-                }
-            }
-            return ret;
-        }
-        return input;
-    }
-}