xmlui 0.4.2-beta.1 → 0.4.3

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

@@ -10,22 +10,22 @@ const defaultCompResult = {
 };
 // 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;
+    var _a, _b, _c, _d, _e;
     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());
+    const horizontalAlignment = compileAlignment("horizontalAlignment", layoutProps);
     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());
+    const verticalAlignment = compileAlignment("verticalAlignment", layoutProps);
     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());
+    const orientation = compileOrientation("orientation", layoutProps);
     if (orientation) {
         result.nonCssProps.orientation = orientation;
     }
@@ -34,7 +34,7 @@ function compileLayout(layoutProps = constants_1.EMPTY_OBJECT, themeVars, layout
         // --- 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());
+    const widthResult = compileSize("width", layoutProps);
     if (widthResult.value)
         css.width = widthResult.value;
     if (isHorizontalAndStartSize(widthResult, layoutContext)) {
@@ -42,13 +42,13 @@ function compileLayout(layoutProps = constants_1.EMPTY_OBJECT, themeVars, layout
         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());
+    const minWidthResult = compileSize("minWidth", layoutProps);
     if (minWidthResult.value)
         css.minWidth = minWidthResult.value;
-    const maxWidthResult = compileSize("maxWidth", (_f = layoutProps.maxWidth) === null || _f === void 0 ? void 0 : _f.toString());
+    const maxWidthResult = compileSize("maxWidth", layoutProps);
     if (maxWidthResult.value)
         css.maxWidth = maxWidthResult.value;
-    const heightResult = compileSize("height", (_g = layoutProps.height) === null || _g === void 0 ? void 0 : _g.toString());
+    const heightResult = compileSize("height", layoutProps);
     if (heightResult.value)
         css.height = heightResult.value;
     if (isVerticalAndStarSize(heightResult, layoutContext)) {
@@ -56,173 +56,172 @@ function compileLayout(layoutProps = constants_1.EMPTY_OBJECT, themeVars, layout
         css.flex = heightResult.ratio;
         css.flexShrink = 1;
     }
-    const minHeightResult = compileSize("minHeight", (_h = layoutProps.minHeight) === null || _h === void 0 ? void 0 : _h.toString());
+    const minHeightResult = compileSize("minHeight", layoutProps);
     if (minHeightResult.value)
         css.minHeight = minHeightResult.value;
-    const maxHeightResult = compileSize("maxHeight", (_j = layoutProps.maxHeight) === null || _j === void 0 ? void 0 : _j.toString());
+    const maxHeightResult = compileSize("maxHeight", layoutProps);
     if (maxHeightResult.value)
         css.maxHeight = maxHeightResult.value;
     // --- Compile positions
-    const top = compileSize("top", (_k = layoutProps.top) === null || _k === void 0 ? void 0 : _k.toString());
+    const top = compileSize("top", layoutProps);
     if (top.value)
         css.top = top.value;
-    const right = compileSize("right", (_l = layoutProps.right) === null || _l === void 0 ? void 0 : _l.toString());
+    const right = compileSize("right", layoutProps);
     if (right.value)
         css.right = right.value;
-    const bottom = compileSize("bottom", (_m = layoutProps.bottom) === null || _m === void 0 ? void 0 : _m.toString());
+    const bottom = compileSize("bottom", layoutProps);
     if (bottom.value)
         css.bottom = bottom.value;
-    const left = compileSize("left", (_o = layoutProps.left) === null || _o === void 0 ? void 0 : _o.toString());
+    const left = compileSize("left", layoutProps);
     if (left.value)
         css.left = left.value;
     // --- Compile gap
-    const gap = compileSize("gap", (_p = layoutProps.gap) === null || _p === void 0 ? void 0 : _p.toString());
+    const gap = compileSize("gap", layoutProps);
     if (gap.value)
         css.gap = gap.value;
     // --- Compile border
-    const border = compileBorder("border", (_q = layoutProps.border) === null || _q === void 0 ? void 0 : _q.toString());
+    const border = compileBorder("border", layoutProps);
     if (border)
         css.border = border;
-    const borderTop = compileBorder("borderTop", (_r = layoutProps.borderTop) === null || _r === void 0 ? void 0 : _r.toString());
+    const borderTop = compileBorder("borderTop", layoutProps);
     if (borderTop)
         css.borderTop = borderTop;
-    const borderRight = compileBorder("borderRight", (_s = layoutProps.borderRight) === null || _s === void 0 ? void 0 : _s.toString());
+    const borderRight = compileBorder("borderRight", layoutProps);
     if (borderRight)
         css.borderRight = borderRight;
-    const borderBottom = compileBorder("borderBottom", (_t = layoutProps.borderBottom) === null || _t === void 0 ? void 0 : _t.toString());
+    const borderBottom = compileBorder("borderBottom", layoutProps);
     if (borderBottom)
         css.borderBottom = borderBottom;
-    const borderLeft = compileBorder("borderLeft", (_u = layoutProps.borderLeft) === null || _u === void 0 ? void 0 : _u.toString());
+    const borderLeft = compileBorder("borderLeft", layoutProps);
     if (borderLeft)
         css.borderLeft = borderLeft;
     // --- Compile radius
-    const radius = compileRadius("radius", (_v = layoutProps.radius) === null || _v === void 0 ? void 0 : _v.toString());
+    const radius = compileRadius("radius", layoutProps);
     if (radius)
         css.borderRadius = radius;
-    const radiusTopLeft = compileRadius("radiusTopLeft", (_w = layoutProps.radiusTopLeft) === null || _w === void 0 ? void 0 : _w.toString());
+    const radiusTopLeft = compileRadius("radiusTopLeft", layoutProps);
     if (radiusTopLeft)
         css.borderTopLeftRadius = radiusTopLeft;
-    const radiusTopRight = compileRadius("radiusTopRight", (_x = layoutProps.radiusTopRight) === null || _x === void 0 ? void 0 : _x.toString());
+    const radiusTopRight = compileRadius("radiusTopRight", layoutProps);
     if (radiusTopRight)
         css.borderTopRightRadius = radiusTopRight;
-    const radiusBottomLeft = compileRadius("radiusBottomLeft", (_y = layoutProps.radiusBottomLeft) === null || _y === void 0 ? void 0 : _y.toString());
+    const radiusBottomLeft = compileRadius("radiusBottomLeft", layoutProps);
     if (radiusBottomLeft)
         css.borderBottomLeftRadius = radiusBottomLeft;
-    const radiusBottomRight = compileRadius("radiusBottomRight", (_z = layoutProps.radiusBottomRight) === null || _z === void 0 ? void 0 : _z.toString());
+    const radiusBottomRight = compileRadius("radiusBottomRight", layoutProps);
     if (radiusBottomRight)
         css.borderBottomRightRadius = radiusBottomRight;
     // --- Compile padding
-    const padding = compileSize("padding", (_0 = layoutProps.padding) === null || _0 === void 0 ? void 0 : _0.toString());
+    const padding = compileSize("padding", layoutProps);
     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);
+    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("rightPadding", (_4 = layoutProps.paddingRight) === null || _4 === void 0 ? void 0 : _4.toString()), horizontalPadding);
+    const paddingRight = mergeSizes(compileSize("paddingRight", layoutProps), 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);
+    const paddingTop = mergeSizes(compileSize("paddingTop", layoutProps), 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);
+    const paddingBottom = mergeSizes(compileSize("paddingBottom", layoutProps), 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());
+    const margin = compileMargin("margin", layoutProps);
     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;
+    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 = (_13 = compileMargin("rightMargin", (_12 = layoutProps.marginRight) === null || _12 === void 0 ? void 0 : _12.toString())) !== null && _13 !== void 0 ? _13 : horizontalMargin;
+    const marginRight = (_b = compileMargin("marginRight", layoutProps)) !== null && _b !== void 0 ? _b : 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;
+    const marginTop = (_c = compileMargin("marginTop", layoutProps)) !== null && _c !== void 0 ? _c : 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;
+    const marginBottom = (_d = compileMargin("marginBottom", layoutProps)) !== null && _d !== void 0 ? _d : verticalMargin;
     if (marginBottom)
         css.marginBottom = marginBottom;
     // --- Compile other
-    const backgroundColor = compileColor("backgroundColor", (_18 = layoutProps.backgroundColor) === null || _18 === void 0 ? void 0 : _18.toString());
+    const backgroundColor = compileColor("backgroundColor", layoutProps);
     if (backgroundColor)
         css.backgroundColor = backgroundColor;
     //TODO illesg
-    const background = compileBackground("background", (_19 = layoutProps.background) === null || _19 === void 0 ? void 0 : _19.toString());
+    const background = compileBackground("background", layoutProps);
     if (background)
         css.background = background;
-    const boxShadow = compileShadow("shadow", (_20 = layoutProps.shadow) === null || _20 === void 0 ? void 0 : _20.toString());
+    const boxShadow = compileShadow("shadow", layoutProps);
     if (boxShadow)
         css.boxShadow = boxShadow;
-    const direction = compileDirection("direction", (_21 = layoutProps.direction) === null || _21 === void 0 ? void 0 : _21.toString());
+    const direction = compileDirection("direction", layoutProps);
     if (direction)
         css.direction = direction;
-    const overflowX = compileScrolling("horizontalOverflow", (_22 = layoutProps.horizontalOverflow) === null || _22 === void 0 ? void 0 : _22.toString());
+    const overflowX = compileScrolling("horizontalOverflow", layoutProps);
     if (overflowX)
         css.overflowX = overflowX;
-    const overflowY = compileScrolling("verticalOverflow", (_23 = layoutProps.verticalOverflow) === null || _23 === void 0 ? void 0 : _23.toString());
+    const overflowY = compileScrolling("verticalOverflow", layoutProps);
     if (overflowY)
         css.overflowY = overflowY;
-    const zIndex = compileZIndex("zIndex", (_24 = layoutProps.zIndex) === null || _24 === void 0 ? void 0 : _24.toString());
+    const zIndex = compileZIndex("zIndex", layoutProps);
     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());
+    const opacity = compileOpacity("opacity", layoutProps);
     if (opacity)
         css.opacity = opacity;
     // --- Compile typography
-    const color = compileColor("color", (_26 = layoutProps.color) === null || _26 === void 0 ? void 0 : _26.toString());
+    const color = compileColor("color", layoutProps);
     if (color)
         css.color = color;
-    const fontFamily = compileFontFamily("fontFamily", (_27 = layoutProps.fontFamily) === null || _27 === void 0 ? void 0 : _27.toString());
+    const fontFamily = compileFontFamily("fontFamily", layoutProps);
     if (fontFamily)
         css.fontFamily = fontFamily;
-    const fontSize = compileSize("fontSize", (_28 = layoutProps.fontSize) === null || _28 === void 0 ? void 0 : _28.toString());
+    const fontSize = compileSize("fontSize", layoutProps);
     if (fontSize.value)
         css.fontSize = fontSize.value;
-    const fontWeight = compileFontWeight("fontWeight", (_29 = layoutProps.fontWeight) === null || _29 === void 0 ? void 0 : _29.toString());
+    const fontWeight = compileFontWeight("fontWeight", layoutProps);
     if (fontWeight)
         css.fontWeight = fontWeight;
-    const fontStyle = compileItalic("italic", (_30 = layoutProps.italic) === null || _30 === void 0 ? void 0 : _30.toString());
+    const fontStyle = compileItalic("italic", layoutProps);
     if (fontStyle)
         css.fontStyle = fontStyle;
-    const textDecoration = compileTextDecoration("textDecoration", (_31 = layoutProps.textDecoration) === null || _31 === void 0 ? void 0 : _31.toString());
+    const textDecoration = compileTextDecoration("textDecoration", layoutProps);
     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());
+    const userSelect = compileUserSelect("userSelect", layoutProps);
     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());
+    const letterSpacing = compileSize("letterSpacing", layoutProps);
     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());
+    const textTransform = compileTextTransform("textTransform", layoutProps);
     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());
+    const lineHeight = compileLineHeight("lineHeight", layoutProps);
     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());
+    const textAlign = compileTextAlign("textAlign", layoutProps);
     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());
+    const textAlignLast = compileTextAlign("textAlignLast", layoutProps);
     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();
+    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;
     // --- 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());
+    const wrapContent = compileWrapContent("wrapContent", layoutProps);
     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());
+    const canShrink = compileCanShrink("canShrink", layoutProps);
     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());
+    const cursor = compileCursor("cursor", layoutProps);
     if (cursor)
         css.cursor = cursor;
     // --- Done
@@ -244,68 +243,100 @@ function compileLayout(layoutProps = constants_1.EMPTY_OBJECT, themeVars, layout
         }
         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;
+    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;
             }
-            //TODO illesg
-            // if (hasOnlyUnresolvedVars(node.themeId)) {
-            //   return undefined;
-            // }
-            if (node.themeId) {
-                return (0, StyleParser_1.toCssVar)(node.themeId);
-            }
-            return convertFn(node);
+            return mergedValue !== null && mergedValue !== void 0 ? mergedValue : defValue;
         }
-        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;
+        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, source) {
-        return compile(propName, source, (p) => p.parseAlignment(), (n) => n.value);
+    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, source) {
-        return compile(propName, source, (p) => p.parseTextAlign(), (n) => n.value);
+    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, source) {
-        return compile(propName, source, (p) => p.parseUserSelect(), (n) => n.value);
+    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, source) {
-        return compile(propName, source, (p) => p.parseTextTransform(), (n) => n.value);
+    function compileTextTransform(propName, layoutProps) {
+        return compile(propName, layoutProps, (p) => p.parseTextTransform(), (n) => n.value);
     }
-    function compileOrientation(propName, source) {
-        return compile(propName, source, (p) => p.parseOrientation(), (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, source) {
-        return compile(propName, source, (p) => p.parseLineHeight(), (n) => `${n.value}${n.unit}`);
+    function compileLineHeight(propName, layoutProps) {
+        return compile(propName, layoutProps, (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}`);
+    function compileOpacity(propName, layoutProps) {
+        return compile(propName, layoutProps, (p) => p.parseOpacity(), (n) => `${n.value}${n.unit}`);
     }
     // --- Compiles a size definition into a CSS size property
-    function compileSize(propName, source) {
+    function compileSize(propName, layoutProps) {
         let isStarSize = false;
         let ratio;
-        let value = compile(propName, source, (p) => {
+        let value = compile(propName, layoutProps, (p) => {
             var _a;
             const sizeNode = p.parseSize();
             isStarSize = (sizeNode === null || sizeNode === void 0 ? void 0 : sizeNode.unit) === "*";
@@ -321,37 +352,37 @@ function compileLayout(layoutProps = constants_1.EMPTY_OBJECT, themeVars, layout
         };
     }
     // --- 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}`; });
+    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, source) {
-        return compile(propName, source, (p) => p.parseZIndex(), (n) => n.value.toString());
+    function compileZIndex(propName, layoutProps) {
+        return compile(propName, layoutProps, (p) => p.parseZIndex(), (n) => n.value.toString());
     }
-    function compileScrolling(propName, source) {
-        return compile(propName, source, (p) => p.parseScrolling(), (n) => n.value);
+    function compileScrolling(propName, layoutProps) {
+        return compile(propName, layoutProps, (p) => p.parseScrolling(), (n) => n.value);
     }
-    function compileDirection(propName, source) {
-        return compile(propName, source, (p) => p.parseDirection(), (n) => n.value);
+    function compileDirection(propName, layoutProps) {
+        return compile(propName, layoutProps, (p) => p.parseDirection(), (n) => n.value);
     }
-    function compileCursor(propName, source) {
-        return compile(propName, source, (p) => p.parseCursor(), (n) => n.value);
+    function compileCursor(propName, layoutProps) {
+        return compile(propName, layoutProps, (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 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, source) {
-        return compile(propName, source, (p) => p.parseFontFamily(), (n) => n.value);
+    function compileFontFamily(propName, layoutProps) {
+        return compile(propName, layoutProps, (p) => p.parseFontFamily(), (n) => n.value);
     }
-    function compileColor(propName, source) {
-        return compile(propName, source, (p) => p.parseColor(), (n) => n.value !== undefined
+    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, source) {
-        return compile(propName, source, (p) => p.parseColor(), (n) => 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
@@ -380,8 +411,8 @@ function compileLayout(layoutProps = constants_1.EMPTY_OBJECT, themeVars, layout
         }
         return true;
     }
-    function compileBorder(propName, source) {
-        return compile(propName, source, (p) => p.parseBorder(), (n) => {
+    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;
@@ -401,8 +432,8 @@ function compileLayout(layoutProps = constants_1.EMPTY_OBJECT, themeVars, layout
                     : ""}`).trim();
         });
     }
-    function compileTextDecoration(propName, source) {
-        return compile(propName, source, (p) => p.parseTextDecoration(), (n) => {
+    function compileTextDecoration(propName, layoutProps) {
+        return compile(propName, layoutProps, (p) => p.parseTextDecoration(), (n) => {
             var _a, _b, _c;
             if (n.none) {
                 return "none";
@@ -421,8 +452,8 @@ function compileLayout(layoutProps = constants_1.EMPTY_OBJECT, themeVars, layout
                 `${(_c = n.color) !== null && _c !== void 0 ? _c : ""}`).trim();
         });
     }
-    function compileRadius(propName, source) {
-        return compile(propName, source, (p) => p.parseRadius(), (n) => {
+    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;
@@ -437,8 +468,8 @@ function compileLayout(layoutProps = constants_1.EMPTY_OBJECT, themeVars, layout
             return part.trim();
         });
     }
-    function compileShadow(propName, source) {
-        return compile(propName, source, (p) => p.parseShadow(), (n) => {
+    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 : []) {
@@ -461,20 +492,16 @@ function compileLayout(layoutProps = constants_1.EMPTY_OBJECT, themeVars, layout
         });
     }
     // --- 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"));
+    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, source) {
-        return compile(propName, source, (p) => p.parseBoolean(), (n) => (n.value ? "wrap" : "nowrap"));
+    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, 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 compileCanShrink(propName, layoutProps) {
+        return compile(propName, layoutProps, (p) => p.parseBoolean(), (n) => (n.value ? "1" : "0"));
     }
     function isHorizontalAndStartSize(size, layoutContext) {
         if (!size.value)

package/dist/scripts/xmlui/src/parsers/xmlui-parser/ParserError.js

@@ -51,4 +51,5 @@ exports.errorMessages = {
     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",
+    T024: "Cannot put a reusable component definitions into a slot",
 };

package/dist/scripts/xmlui/src/parsers/xmlui-parser/diagnostics.js

@@ -76,7 +76,7 @@ exports.Diag_Tag_Identifier_Expected = {
 exports.Diag_Attr_Value_Expected = {
     category: DiagnosticCategory.Error,
     code: ErrCodes.expAttrValue,
-    message: "An attribute value expected between quotes.",
+    message: "An attribute value expected.",
 };
 exports.Diag_Eq_Token_Expected = {
     category: DiagnosticCategory.Error,