xmlui 0.4.0

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styleErrorMessages = exports.StyleParserError = void 0;
+// The common root class of all parser error objects
+class StyleParserError extends Error {
+    constructor(message, code) {
+        super(message);
+        this.code = code;
+        // --- Set the prototype explicitly.
+        Object.setPrototypeOf(this, StyleParserError.prototype);
+    }
+}
+exports.StyleParserError = StyleParserError;
+// The error messages of error codes
+exports.styleErrorMessages = {
+    S001: "A numeric value expected",
+    S002: "A dimension unit expected",
+    S003: "An alignment value expected",
+    S004: "A border style value expected",
+    S005: "A color value or expression expected",
+    S006: "Unknown color function name '{0}'",
+    S007: "'(' expected, but '{0}' received",
+    S008: "A color channel percentage value expected between 0 and 100",
+    S009: "A color channel value expected between 0 and 255",
+    S010: "')' expected, but '{0}' received",
+    S011: "An alpha channel value expected between 0.0 and 1.0",
+    S012: "A scrolling value expected",
+    S013: "A direction value expected",
+    S014: "A fontFamily value expected",
+    S015: "A fontWeight value expected",
+    S016: "Unexpected token found",
+    S017: "A Boolean value expected",
+    S018: "An orientation value expected",
+    S019: "']' expected",
+    S020: "A user-select value expected",
+    S021: "A text transform value expected",
+};

package/dist/scripts/src/parsers/style-parser/source-tree.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,513 @@
+"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, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41;
+    const result = {
+        cssProps: {},
+        nonCssProps: {},
+    };
+    const css = result.cssProps;
+    // --- Compile alignment
+    const horizontalAlignment = compileAlignment("horizontalAlignment", (_a = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.horizontalAlignment) === null || _a === void 0 ? void 0 : _a.toString());
+    if (horizontalAlignment) {
+        result.nonCssProps.horizontalAlignment = horizontalAlignment;
+    }
+    const verticalAlignment = compileAlignment("verticalAlignment", (_b = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.verticalAlignment) === null || _b === void 0 ? void 0 : _b.toString());
+    if (verticalAlignment) {
+        result.nonCssProps.verticalAlignment = verticalAlignment;
+    }
+    const orientation = compileOrientation("orientation", (_c = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.orientation) === null || _c === void 0 ? void 0 : _c.toString());
+    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", (_d = layoutProps.width) === null || _d === void 0 ? void 0 : _d.toString());
+    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", (_e = layoutProps.minWidth) === null || _e === void 0 ? void 0 : _e.toString());
+    if (minWidthResult.value)
+        css.minWidth = minWidthResult.value;
+    const maxWidthResult = compileSize("maxWidth", (_f = layoutProps.maxWidth) === null || _f === void 0 ? void 0 : _f.toString());
+    if (maxWidthResult.value)
+        css.maxWidth = maxWidthResult.value;
+    const heightResult = compileSize("height", (_g = layoutProps.height) === null || _g === void 0 ? void 0 : _g.toString());
+    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", (_h = layoutProps.minHeight) === null || _h === void 0 ? void 0 : _h.toString());
+    if (minHeightResult.value)
+        css.minHeight = minHeightResult.value;
+    const maxHeightResult = compileSize("maxHeight", (_j = layoutProps.maxHeight) === null || _j === void 0 ? void 0 : _j.toString());
+    if (maxHeightResult.value)
+        css.maxHeight = maxHeightResult.value;
+    // --- Compile positions
+    const top = compileSize("top", (_k = layoutProps.top) === null || _k === void 0 ? void 0 : _k.toString());
+    if (top.value)
+        css.top = top.value;
+    const right = compileSize("right", (_l = layoutProps.right) === null || _l === void 0 ? void 0 : _l.toString());
+    if (right.value)
+        css.right = right.value;
+    const bottom = compileSize("bottom", (_m = layoutProps.bottom) === null || _m === void 0 ? void 0 : _m.toString());
+    if (bottom.value)
+        css.bottom = bottom.value;
+    const left = compileSize("left", (_o = layoutProps.left) === null || _o === void 0 ? void 0 : _o.toString());
+    if (left.value)
+        css.left = left.value;
+    // --- Compile gap
+    const gap = compileSize("gap", (_p = layoutProps.gap) === null || _p === void 0 ? void 0 : _p.toString());
+    if (gap.value)
+        css.gap = gap.value;
+    // --- Compile border
+    const border = compileBorder("border", (_q = layoutProps.border) === null || _q === void 0 ? void 0 : _q.toString());
+    if (border)
+        css.border = border;
+    const borderTop = compileBorder("borderTop", (_r = layoutProps.borderTop) === null || _r === void 0 ? void 0 : _r.toString());
+    if (borderTop)
+        css.borderTop = borderTop;
+    const borderRight = compileBorder("borderRight", (_s = layoutProps.borderRight) === null || _s === void 0 ? void 0 : _s.toString());
+    if (borderRight)
+        css.borderRight = borderRight;
+    const borderBottom = compileBorder("borderBottom", (_t = layoutProps.borderBottom) === null || _t === void 0 ? void 0 : _t.toString());
+    if (borderBottom)
+        css.borderBottom = borderBottom;
+    const borderLeft = compileBorder("borderLeft", (_u = layoutProps.borderLeft) === null || _u === void 0 ? void 0 : _u.toString());
+    if (borderLeft)
+        css.borderLeft = borderLeft;
+    // --- Compile radius
+    const radius = compileRadius("radius", (_v = layoutProps.radius) === null || _v === void 0 ? void 0 : _v.toString());
+    if (radius)
+        css.borderRadius = radius;
+    const radiusTopLeft = compileRadius("radiusTopLeft", (_w = layoutProps.radiusTopLeft) === null || _w === void 0 ? void 0 : _w.toString());
+    if (radiusTopLeft)
+        css.borderTopLeftRadius = radiusTopLeft;
+    const radiusTopRight = compileRadius("radiusTopRight", (_x = layoutProps.radiusTopRight) === null || _x === void 0 ? void 0 : _x.toString());
+    if (radiusTopRight)
+        css.borderTopRightRadius = radiusTopRight;
+    const radiusBottomLeft = compileRadius("radiusBottomLeft", (_y = layoutProps.radiusBottomLeft) === null || _y === void 0 ? void 0 : _y.toString());
+    if (radiusBottomLeft)
+        css.borderBottomLeftRadius = radiusBottomLeft;
+    const radiusBottomRight = compileRadius("radiusBottomRight", (_z = layoutProps.radiusBottomRight) === null || _z === void 0 ? void 0 : _z.toString());
+    if (radiusBottomRight)
+        css.borderBottomRightRadius = radiusBottomRight;
+    // --- Compile padding
+    const padding = compileSize("padding", (_0 = layoutProps.padding) === null || _0 === void 0 ? void 0 : _0.toString());
+    if (padding.value)
+        css.padding = padding.value;
+    const horizontalPadding = compileSize("horizontalPadding", (_1 = layoutProps.horizontalPadding) === null || _1 === void 0 ? void 0 : _1.toString());
+    const verticalPadding = compileSize("verticalPadding", (_2 = layoutProps.verticalPadding) === null || _2 === void 0 ? void 0 : _2.toString());
+    const paddingLeft = mergeSizes(compileSize("leftPadding", (_3 = layoutProps.paddingLeft) === null || _3 === void 0 ? void 0 : _3.toString()), horizontalPadding);
+    if (paddingLeft.value)
+        css.paddingLeft = paddingLeft.value;
+    const paddingRight = mergeSizes(compileSize("rightPadding", (_4 = layoutProps.paddingRight) === null || _4 === void 0 ? void 0 : _4.toString()), horizontalPadding);
+    if (paddingRight.value)
+        css.paddingRight = paddingRight.value;
+    const paddingTop = mergeSizes(compileSize("topPadding", (_5 = layoutProps.paddingTop) === null || _5 === void 0 ? void 0 : _5.toString()), verticalPadding);
+    if (paddingTop.value)
+        css.paddingTop = paddingTop.value;
+    const paddingBottom = mergeSizes(compileSize("bottomPadding", (_6 = layoutProps.paddingBottom) === null || _6 === void 0 ? void 0 : _6.toString()), verticalPadding);
+    if (paddingBottom.value)
+        css.paddingBottom = paddingBottom.value;
+    // --- Compile margin
+    const margin = compileMargin("margin", (_7 = layoutProps.margin) === null || _7 === void 0 ? void 0 : _7.toString());
+    if (margin)
+        css.margin = margin;
+    const horizontalMargin = compileMargin("horizontalMargin", (_8 = layoutProps.horizontalMargin) === null || _8 === void 0 ? void 0 : _8.toString());
+    const verticalMargin = compileMargin("verticalMargin", (_9 = layoutProps.verticalMargin) === null || _9 === void 0 ? void 0 : _9.toString());
+    const marginLeft = (_11 = compileMargin("leftMargin", (_10 = layoutProps.marginLeft) === null || _10 === void 0 ? void 0 : _10.toString())) !== null && _11 !== void 0 ? _11 : horizontalMargin;
+    if (marginLeft)
+        css.marginLeft = marginLeft;
+    const marginRight = (_13 = compileMargin("rightMargin", (_12 = layoutProps.marginRight) === null || _12 === void 0 ? void 0 : _12.toString())) !== null && _13 !== void 0 ? _13 : horizontalMargin;
+    if (marginRight)
+        css.marginRight = marginRight;
+    const marginTop = (_15 = compileMargin("topMargin", (_14 = layoutProps.marginTop) === null || _14 === void 0 ? void 0 : _14.toString())) !== null && _15 !== void 0 ? _15 : verticalMargin;
+    if (marginTop)
+        css.marginTop = marginTop;
+    const marginBottom = (_17 = compileMargin("bottomMargin", (_16 = layoutProps.marginBottom) === null || _16 === void 0 ? void 0 : _16.toString())) !== null && _17 !== void 0 ? _17 : verticalMargin;
+    if (marginBottom)
+        css.marginBottom = marginBottom;
+    // --- Compile other
+    const backgroundColor = compileColor("backgroundColor", (_18 = layoutProps.backgroundColor) === null || _18 === void 0 ? void 0 : _18.toString());
+    if (backgroundColor)
+        css.backgroundColor = backgroundColor;
+    //TODO illesg
+    const background = compileBackground("background", (_19 = layoutProps.background) === null || _19 === void 0 ? void 0 : _19.toString());
+    if (background)
+        css.background = background;
+    const boxShadow = compileShadow("shadow", (_20 = layoutProps.shadow) === null || _20 === void 0 ? void 0 : _20.toString());
+    if (boxShadow)
+        css.boxShadow = boxShadow;
+    const direction = compileDirection("direction", (_21 = layoutProps.direction) === null || _21 === void 0 ? void 0 : _21.toString());
+    if (direction)
+        css.direction = direction;
+    const overflowX = compileScrolling("horizontalOverflow", (_22 = layoutProps.horizontalOverflow) === null || _22 === void 0 ? void 0 : _22.toString());
+    if (overflowX)
+        css.overflowX = overflowX;
+    const overflowY = compileScrolling("verticalOverflow", (_23 = layoutProps.verticalOverflow) === null || _23 === void 0 ? void 0 : _23.toString());
+    if (overflowY)
+        css.overflowY = overflowY;
+    const zIndex = compileZIndex("zIndex", (_24 = layoutProps.zIndex) === null || _24 === void 0 ? void 0 : _24.toString());
+    if (zIndex)
+        css.zIndex = zIndex;
+    const opacity = compileOpacity("zIndex", (_25 = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.opacity) === null || _25 === void 0 ? void 0 : _25.toString());
+    if (opacity)
+        css.opacity = opacity;
+    // --- Compile typography
+    const color = compileColor("color", (_26 = layoutProps.color) === null || _26 === void 0 ? void 0 : _26.toString());
+    if (color)
+        css.color = color;
+    const fontFamily = compileFontFamily("fontFamily", (_27 = layoutProps.fontFamily) === null || _27 === void 0 ? void 0 : _27.toString());
+    if (fontFamily)
+        css.fontFamily = fontFamily;
+    const fontSize = compileSize("fontSize", (_28 = layoutProps.fontSize) === null || _28 === void 0 ? void 0 : _28.toString());
+    if (fontSize.value)
+        css.fontSize = fontSize.value;
+    const fontWeight = compileFontWeight("fontWeight", (_29 = layoutProps.fontWeight) === null || _29 === void 0 ? void 0 : _29.toString());
+    if (fontWeight)
+        css.fontWeight = fontWeight;
+    const fontStyle = compileItalic("italic", (_30 = layoutProps.italic) === null || _30 === void 0 ? void 0 : _30.toString());
+    if (fontStyle)
+        css.fontStyle = fontStyle;
+    const textDecoration = compileTextDecoration("textDecoration", (_31 = layoutProps.textDecoration) === null || _31 === void 0 ? void 0 : _31.toString());
+    if (textDecoration)
+        css.textDecoration = textDecoration;
+    const userSelect = compileUserSelect("userSelect", (_32 = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.userSelect) === null || _32 === void 0 ? void 0 : _32.toString());
+    if (userSelect)
+        css.userSelect = userSelect;
+    const letterSpacing = compileSize("letterSpacing", (_33 = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.letterSpacing) === null || _33 === void 0 ? void 0 : _33.toString());
+    if (letterSpacing.value)
+        css.letterSpacing = letterSpacing.value;
+    const textTransform = compileTextTransform("textTransform", (_34 = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.textTransform) === null || _34 === void 0 ? void 0 : _34.toString());
+    if (textTransform)
+        css.textTransform = textTransform;
+    const lineHeight = compileLineHeight("lineHeight", (_35 = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.lineHeight) === null || _35 === void 0 ? void 0 : _35.toString());
+    if (lineHeight)
+        css.lineHeight = lineHeight;
+    const textAlign = compileTextAlign("textAlign", (_36 = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.textAlign) === null || _36 === void 0 ? void 0 : _36.toString());
+    if (textAlign)
+        css.textAlign = textAlign;
+    const textAlignLast = compileTextAlign("textAlignLast", (_37 = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.textAlignLast) === null || _37 === void 0 ? void 0 : _37.toString());
+    if (textAlignLast)
+        css.textAlignLast = textAlignLast;
+    //TODO illesg
+    const textWrap = (_38 = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.textWrap) === null || _38 === void 0 ? void 0 : _38.toString();
+    if (textWrap)
+        css.textWrap = textWrap;
+    // --- Compile content rendering
+    const wrapContent = compileWrapContent("wrapContent", (_39 = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.wrapContent) === null || _39 === void 0 ? void 0 : _39.toString());
+    if (wrapContent)
+        css.flexWrap = wrapContent;
+    const canShrink = compileCanShrink("canShrink", (_40 = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.canShrink) === null || _40 === void 0 ? void 0 : _40.toString());
+    if (canShrink)
+        css.flexShrink = canShrink;
+    // --- Other
+    const cursor = compileCursor("cursor", (_41 = layoutProps === null || layoutProps === void 0 ? void 0 : layoutProps.cursor) === null || _41 === void 0 ? void 0 : _41.toString());
+    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, source, parseFn, convertFn) {
+        var _a, _b;
+        if (!source)
+            return undefined;
+        const parser = new StyleParser_1.StyleParser(source);
+        try {
+            const node = parseFn(parser);
+            if (!node)
+                return source;
+            if (!parser.testCompleted()) {
+                (_a = result.issues) !== null && _a !== void 0 ? _a : (result.issues = {});
+                result.issues[propName] = `Unexpected tail after the ${propName}`;
+                return source;
+            }
+            //TODO illesg
+            // if (hasOnlyUnresolvedVars(node.themeId)) {
+            //   return undefined;
+            // }
+            if (node.themeId) {
+                return (0, StyleParser_1.toCssVar)(node.themeId);
+            }
+            return convertFn(node);
+        }
+        catch (err) {
+            (_b = result.issues) !== null && _b !== void 0 ? _b : (result.issues = {});
+            result.issues[propName] = err === null || err === void 0 ? void 0 : err.toString();
+            //TODO illesg
+            return source;
+        }
+    }
+    // --- Compiles an alignment definition into a CSS size property
+    function compileAlignment(propName, source) {
+        return compile(propName, source, (p) => p.parseAlignment(), (n) => n.value);
+    }
+    // --- Compiles an alignment definition into a CSS size property
+    function compileTextAlign(propName, source) {
+        return compile(propName, source, (p) => p.parseTextAlign(), (n) => n.value);
+    }
+    // --- Compiles a user select definition into a CSS size property
+    function compileUserSelect(propName, source) {
+        return compile(propName, source, (p) => p.parseUserSelect(), (n) => n.value);
+    }
+    // --- Compiles a text transform definition into a CSS size property
+    function compileTextTransform(propName, source) {
+        return compile(propName, source, (p) => p.parseTextTransform(), (n) => n.value);
+    }
+    function compileOrientation(propName, source) {
+        return compile(propName, source, (p) => p.parseOrientation(), (n) => n.value);
+    }
+    // --- Compiles a size definition into a CSS size property
+    function compileLineHeight(propName, source) {
+        return compile(propName, source, (p) => p.parseLineHeight(), (n) => `${n.value}${n.unit}`);
+    }
+    // --- Compiles a size definition into a CSS size property
+    function compileOpacity(propName, source) {
+        return compile(propName, source, (p) => p.parseOpacity(), (n) => `${n.value}${n.unit}`);
+    }
+    // --- Compiles a size definition into a CSS size property
+    function compileSize(propName, source) {
+        let isStarSize = false;
+        let ratio;
+        let value = compile(propName, source, (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, source) {
+        return compile(propName, source, (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, source) {
+        return compile(propName, source, (p) => p.parseZIndex(), (n) => n.value.toString());
+    }
+    function compileScrolling(propName, source) {
+        return compile(propName, source, (p) => p.parseScrolling(), (n) => n.value);
+    }
+    function compileDirection(propName, source) {
+        return compile(propName, source, (p) => p.parseDirection(), (n) => n.value);
+    }
+    function compileCursor(propName, source) {
+        return compile(propName, source, (p) => p.parseCursor(), (n) => n.value);
+    }
+    function compileFontWeight(propName, source) {
+        return compile(propName, source, (p) => p.parseFontWeight(), (n) => { var _a; return (_a = n.value) === null || _a === void 0 ? void 0 : _a.toString(); });
+    }
+    function compileFontFamily(propName, source) {
+        return compile(propName, source, (p) => p.parseFontFamily(), (n) => n.value);
+    }
+    function compileColor(propName, source) {
+        return compile(propName, source, (p) => p.parseColor(), (n) => n.value !== undefined
+            ? typeof n.value === "number"
+                ? `#${n.value.toString(16).padStart(8, "0")}`
+                : n.value
+            : undefined);
+    }
+    function compileBackground(propName, source) {
+        return compile(propName, source, (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, source) {
+        return compile(propName, source, (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 compileTextDecoration(propName, source) {
+        return compile(propName, source, (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, source) {
+        return compile(propName, source, (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, source) {
+        return compile(propName, source, (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, source) {
+        return compile(propName, source, (p) => p.parseBoolean(), (n) => (n.value ? "italic" : "normal"));
+    }
+    // --- Compiles a Boolean definition into a CSS flex-wrap property
+    function compileWrapContent(propName, source) {
+        return compile(propName, source, (p) => p.parseBoolean(), (n) => (n.value ? "wrap" : "nowrap"));
+    }
+    // --- Compiles a Boolean definition into a CSS flex-shrink property
+    function compileCanShrink(propName, source) {
+        return compile(propName, source, (p) => p.parseBoolean(), (n) => (n.value ? "1" : "0"));
+    }
+    function compileBoolean(propName, defValue, source) {
+        const compiledValue = compile(propName, source, (p) => (source ? p.parseBoolean() : null), (n) => (n.value ? "true" : "false"));
+        return compiledValue === undefined ? defValue : (compiledValue === null || compiledValue === void 0 ? void 0 : compiledValue.toString()) === "true";
+    }
+    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;
+    }
+}

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleTokenType = void 0;
+// Token types used in layout parsing
+var StyleTokenType;
+(function (StyleTokenType) {
+    StyleTokenType[StyleTokenType["Eof"] = -1] = "Eof";
+    StyleTokenType[StyleTokenType["Ws"] = -2] = "Ws";
+    StyleTokenType[StyleTokenType["Unknown"] = 0] = "Unknown";
+    // --- Binding Expression specific tokens
+    StyleTokenType[StyleTokenType["Identifier"] = 1] = "Identifier";
+    StyleTokenType[StyleTokenType["Star"] = 2] = "Star";
+    StyleTokenType[StyleTokenType["Percentage"] = 3] = "Percentage";
+    StyleTokenType[StyleTokenType["Number"] = 4] = "Number";
+    StyleTokenType[StyleTokenType["LParent"] = 5] = "LParent";
+    StyleTokenType[StyleTokenType["RParent"] = 6] = "RParent";
+    StyleTokenType[StyleTokenType["Comma"] = 7] = "Comma";
+    StyleTokenType[StyleTokenType["Slash"] = 8] = "Slash";
+    StyleTokenType[StyleTokenType["None"] = 9] = "None";
+    StyleTokenType[StyleTokenType["UserSelect"] = 10] = "UserSelect";
+    StyleTokenType[StyleTokenType["SizeUnit"] = 11] = "SizeUnit";
+    StyleTokenType[StyleTokenType["FitToContent"] = 12] = "FitToContent";
+    StyleTokenType[StyleTokenType["Auto"] = 13] = "Auto";
+    StyleTokenType[StyleTokenType["Alignment"] = 14] = "Alignment";
+    StyleTokenType[StyleTokenType["TextAlignment"] = 15] = "TextAlignment";
+    StyleTokenType[StyleTokenType["BorderStyle"] = 16] = "BorderStyle";
+    StyleTokenType[StyleTokenType["Scrolling"] = 17] = "Scrolling";
+    StyleTokenType[StyleTokenType["TextTransform"] = 18] = "TextTransform";
+    StyleTokenType[StyleTokenType["Direction"] = 19] = "Direction";
+    StyleTokenType[StyleTokenType["Angle"] = 20] = "Angle";
+    StyleTokenType[StyleTokenType["HexaColor"] = 21] = "HexaColor";
+    StyleTokenType[StyleTokenType["ColorFunc"] = 22] = "ColorFunc";
+    StyleTokenType[StyleTokenType["FontFamily"] = 23] = "FontFamily";
+    StyleTokenType[StyleTokenType["ColorName"] = 24] = "ColorName";
+    StyleTokenType[StyleTokenType["FontWeight"] = 25] = "FontWeight";
+    StyleTokenType[StyleTokenType["DecorationLine"] = 26] = "DecorationLine";
+    StyleTokenType[StyleTokenType["Orientation"] = 27] = "Orientation";
+    StyleTokenType[StyleTokenType["Cursor"] = 28] = "Cursor";
+    StyleTokenType[StyleTokenType["Default"] = 29] = "Default";
+    StyleTokenType[StyleTokenType["Boolean"] = 30] = "Boolean";
+    StyleTokenType[StyleTokenType["String"] = 31] = "String";
+})(StyleTokenType || (exports.StyleTokenType = StyleTokenType = {}));

package/dist/scripts/src/parsers/ueml/ParserError.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.errorMessages = exports.ParserError = void 0;
+// The common root class of all parser error objects
+class ParserError extends Error {
+    constructor(message, code) {
+        super(`${code ? `${code}: ` : ""}${message}`);
+        this.code = code;
+        // --- Set the prototype explicitly.
+        Object.setPrototypeOf(this, ParserError.prototype);
+    }
+}
+exports.ParserError = ParserError;
+// The error messages of error codes
+exports.errorMessages = {
+    U001: "Unexpected token: {0}",
+    U002: "A component definition can have exactly one UEML element",
+    U003: "A '<' token expected",
+    U004: "A node identifier expected",
+    U005: "A '</' token expected",
+    U006: "A '>' or '/>' token expected",
+    U007: "An '{0}' ID expected in the closing tag but '{1}' received",
+    U008: "A '>' token expected",
+    U009: "An attribute identifier expected",
+    U010: "An '=' token expected",
+    U011: "An attribute value expected",
+    U012: "Duplicated attribute: '{0}'",
+    U013: "Attribute name cannot start with an uppercase letter",
+    U014: "An '{0}' ID expected in the closing tag's namespace but '{1}' received",
+    U015: "Unexpected token in text element: {0}",
+    T001: "A component definition must have exactly one UEML element",
+    T002: "A component definition's name must start with an uppercase letter",
+    T003: "A reusable component must have a non-empty name",
+    T004: "A reusable component's name must start with an uppercase letter",
+    T005: "A reusable component must have at least one nested component definition",
+    T006: "A reusable component definition cannot nest another one",
+    T007: `Invalid attribute name: '{0}'`,
+    T008: `Event attribute names should not start with 'on' prefix: '{0}'`,
+    T009: `Invalid node name '{0}' in a component definition`,
+    T010: `The '{0}' element does not accept a text child`,
+    T011: "Only 'name', 'value', and type hint attributes are accepted in '{0}'",
+    T012: "The 'name' attribute in '{0}' is required",
+    T013: "A loader element must have an id",
+    T014: "A loader element must not have '{0}'",
+    T015: "The uses element must define only a non-empty 'value' attribute",
+    T016: "Only 'field' or 'item' are accepted as a child element",
+    T017: "Cannot mix 'field' and 'item' nodes within an element",
+    T018: "The '{0}' node cannot have a 'name' attribute",
+    T019: "The 'value' attribute in '{0}' is required",
+    T020: "Cannot mix nested components and non-component children",
+    T021: "Invalid reusable component attribute '{0}'",
+    T022: "The 'script' tag must not have any attribute",
+    T023: "A 'script' tag cannot nest other child nodes, only text"
+};