xmlui 0.4.0

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

@@ -0,0 +1,1000 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleParser = exports.THEME_VAR_PREFIX = void 0;
+exports.toCssVar = toCssVar;
+const errors_1 = require("./errors");
+const StyleInputStream_1 = require("./StyleInputStream");
+const StyleLexer_1 = require("./StyleLexer");
+const tokens_1 = require("./tokens");
+exports.THEME_VAR_PREFIX = "xmlui";
+/**
+ * This class parses a binding expression and transforms it into an evaluable expression tree
+ */
+class StyleParser {
+    /**
+     * Initializes the parser with the specified source code
+     * @param source Source code to parse
+     */
+    constructor(source) {
+        this.source = source;
+        // --- Keep track of error messages
+        this._parseErrors = [];
+        this._lexer = new StyleLexer_1.StyleLexer(new StyleInputStream_1.StyleInputStream(source));
+    }
+    /**
+     * The errors raised during the parse phase
+     */
+    get errors() {
+        return this._parseErrors;
+    }
+    /**
+     * Gets the current token
+     */
+    get current() {
+        return this._lexer.peek();
+    }
+    /**
+     * Checks if we're at the end of the expression
+     */
+    get isEof() {
+        return this._lexer.peek().type === tokens_1.StyleTokenType.Eof;
+    }
+    /**
+     * Gets the characters remaining after parsing
+     */
+    getTail() {
+        return this._lexer.getTail();
+    }
+    /**
+     * Tests if the parse is complete
+     */
+    testCompleted() {
+        const token = this._lexer.peek(true);
+        if (token.type === tokens_1.StyleTokenType.Eof)
+            return true;
+        if (token.type === tokens_1.StyleTokenType.Ws) {
+            this._lexer.get(true);
+            return this._lexer.peek().type === tokens_1.StyleTokenType.Eof;
+        }
+        else {
+            return false;
+        }
+    }
+    /**
+     * Parses a size value with its unit
+     */
+    parseSize() {
+        return this.parseSizeLike("px");
+    }
+    /**
+     * Parses a line height value
+     */
+    parseLineHeight() {
+        return this.parseSizeLike("");
+    }
+    /**
+     * Parses size and allows "fit-content"
+     */
+    parseMargin() {
+        const startToken = this._lexer.peek();
+        if (startToken.type === tokens_1.StyleTokenType.Auto) {
+            this._lexer.get();
+            return this.createNode("Size", {
+                value: -1,
+                unit: "",
+                extSize: startToken.text,
+            }, startToken);
+        }
+        return this.parseSize();
+    }
+    /**
+     * Parses an opacity value
+     */
+    parseOpacity() {
+        const startToken = this._lexer.peek();
+        const themeIdNode = this.tryThemeId();
+        if (themeIdNode)
+            return themeIdNode;
+        const value = this.getNumber();
+        if (value === null)
+            return null;
+        // --- Get the unit
+        let unit = "";
+        const unitToken = this._lexer.peek(true);
+        if (unitToken.text === "%") {
+            unit = this._lexer.get(true).text;
+        }
+        else if (unitToken.type === tokens_1.StyleTokenType.Ws) {
+            this._lexer.get(true);
+        }
+        else if (unitToken.type !== tokens_1.StyleTokenType.Eof) {
+            this.reportError("S016", unitToken);
+            return null;
+        }
+        // --- Done.
+        return this.createNode("Size", {
+            value,
+            unit,
+        }, startToken);
+    }
+    /**
+     * Parses a boolean value
+     */
+    parseBoolean() {
+        const startToken = this._lexer.peek();
+        const themeIdNode = this.tryThemeId();
+        if (themeIdNode)
+            return themeIdNode;
+        if (startToken.type !== tokens_1.StyleTokenType.Boolean) {
+            this.reportError("S017", startToken);
+            return null;
+        }
+        // --- Done.
+        this._lexer.get();
+        return this.createNode("Boolean", {
+            value: startToken.text === "true" || startToken.text === "yes" || startToken.text === "on",
+        }, startToken);
+    }
+    /**
+     * Parses an alignment value
+     */
+    parseAlignment() {
+        const startToken = this._lexer.peek();
+        if (startToken.type !== tokens_1.StyleTokenType.Alignment) {
+            this.reportError("S003", startToken);
+            return null;
+        }
+        // --- Done.
+        this._lexer.get();
+        return this.createNode("Alignment", {
+            value: startToken.text,
+        }, startToken);
+    }
+    /**
+     * Parses a text alignment value
+     */
+    parseTextAlign() {
+        const startToken = this._lexer.peek();
+        if (startToken.type !== tokens_1.StyleTokenType.Alignment && startToken.type !== tokens_1.StyleTokenType.TextAlignment) {
+            this.reportError("S003", startToken);
+            return null;
+        }
+        // --- Done.
+        this._lexer.get();
+        return this.createNode("TextAlign", {
+            value: startToken.text,
+        }, startToken);
+    }
+    /**
+     * Parses a user select value
+     */
+    parseUserSelect() {
+        const startToken = this._lexer.peek();
+        if (startToken.type !== tokens_1.StyleTokenType.None &&
+            startToken.type !== tokens_1.StyleTokenType.Auto &&
+            startToken.type !== tokens_1.StyleTokenType.UserSelect) {
+            this.reportError("S020", startToken);
+            return null;
+        }
+        // --- Done.
+        this._lexer.get();
+        return this.createNode("UserSelect", {
+            value: startToken.text,
+        }, startToken);
+    }
+    /**
+     * Parses a text transform value
+     */
+    parseTextTransform() {
+        const startToken = this._lexer.peek();
+        if (startToken.type !== tokens_1.StyleTokenType.None && startToken.type !== tokens_1.StyleTokenType.TextTransform) {
+            this.reportError("S021", startToken);
+            return null;
+        }
+        // --- Done.
+        this._lexer.get();
+        return this.createNode("TextTransform", {
+            value: startToken.text,
+        }, startToken);
+    }
+    /**
+     * Parses an orientation value
+     */
+    parseOrientation() {
+        const startToken = this._lexer.peek();
+        if (startToken.type !== tokens_1.StyleTokenType.Orientation) {
+            this.reportError("S018", startToken);
+            return null;
+        }
+        // --- Done.
+        this._lexer.get();
+        return this.createNode("Orientation", {
+            value: startToken.text,
+        }, startToken);
+    }
+    /**
+     * Parses a cursor value
+     */
+    parseCursor() {
+        const startToken = this._lexer.peek();
+        switch (startToken.type) {
+            case tokens_1.StyleTokenType.Auto:
+            case tokens_1.StyleTokenType.None:
+            case tokens_1.StyleTokenType.Default:
+            case tokens_1.StyleTokenType.Cursor:
+                this._lexer.get();
+                return this.createNode("Cursor", {
+                    value: startToken.text,
+                }, startToken);
+            case tokens_1.StyleTokenType.UserSelect:
+                if (startToken.text === "text") {
+                    this._lexer.get();
+                    return this.createNode("Cursor", {
+                        value: "text",
+                    }, startToken);
+                }
+                this.reportError("S018", startToken);
+                return null;
+            default:
+                this.reportError("S018", startToken);
+                return null;
+        }
+    }
+    /**
+     * Parses a direction value
+     */
+    parseDirection() {
+        const startToken = this._lexer.peek();
+        const themeIdNode = this.tryThemeId();
+        if (themeIdNode)
+            return themeIdNode;
+        if (startToken.type !== tokens_1.StyleTokenType.Direction) {
+            this.reportError("S013", startToken);
+            return null;
+        }
+        // --- Done.
+        this._lexer.get();
+        return this.createNode("Direction", {
+            value: startToken.text,
+        }, startToken);
+    }
+    /**
+     * Parses a fontFamily value
+     */
+    parseFontFamily() {
+        const startToken = this._lexer.peek();
+        const themeIdNode = this.tryThemeId();
+        if (themeIdNode)
+            return themeIdNode;
+        let value = "";
+        let nextToken = startToken;
+        while (true) {
+            // --- Get font name token
+            if (nextToken.type === tokens_1.StyleTokenType.Eof)
+                break;
+            if (nextToken.type === tokens_1.StyleTokenType.FontFamily ||
+                nextToken.type === tokens_1.StyleTokenType.Identifier ||
+                nextToken.type === tokens_1.StyleTokenType.String) {
+                value += (value ? ", " : "") + nextToken.text;
+            }
+            else {
+                this.reportError("S014", nextToken);
+                return null;
+            }
+            // --- Skip the parsed token
+            this._lexer.get();
+            // --- Check for separator comma
+            nextToken = this._lexer.peek();
+            if (nextToken.type === tokens_1.StyleTokenType.Comma) {
+                this._lexer.get();
+            }
+            else {
+                break;
+            }
+            nextToken = this._lexer.peek();
+        }
+        // --- Done.
+        return this.createNode("FontFamily", {
+            value,
+        }, startToken);
+    }
+    /**
+     * Parses a weight value
+     */
+    parseFontWeight() {
+        const startToken = this._lexer.peek();
+        const themeIdNode = this.tryThemeId();
+        if (themeIdNode)
+            return themeIdNode;
+        if (startToken.type !== tokens_1.StyleTokenType.FontWeight && startToken.type !== tokens_1.StyleTokenType.Number) {
+            this.reportError("S015", startToken);
+            return null;
+        }
+        // --- Done.
+        this._lexer.get();
+        return this.createNode("FontWeight", {
+            value: startToken.text,
+        }, startToken);
+    }
+    /**
+     * Parses a zIndex value
+     */
+    parseZIndex() {
+        const startToken = this._lexer.peek();
+        const themeIdNode = this.tryThemeId();
+        if (themeIdNode)
+            return themeIdNode;
+        if (startToken.type !== tokens_1.StyleTokenType.Number) {
+            this.reportError("S001", startToken);
+            return null;
+        }
+        // --- Done.
+        this._lexer.get();
+        return this.createNode("ZIndex", {
+            value: startToken.text,
+        }, startToken);
+    }
+    /**
+     * Parses a scrolling value
+     */
+    parseScrolling() {
+        const startToken = this._lexer.peek();
+        const themeIdNode = this.tryThemeId();
+        if (themeIdNode)
+            return themeIdNode;
+        if (startToken.type !== tokens_1.StyleTokenType.Scrolling) {
+            this.reportError("S012", startToken);
+            return null;
+        }
+        // --- Done.
+        this._lexer.get();
+        return this.createNode("Scrolling", {
+            value: startToken.text,
+        }, startToken);
+    }
+    /**
+     * Parses a border style value with its unit
+     */
+    parseBorderStyle() {
+        const startToken = this._lexer.peek();
+        if (startToken.type !== tokens_1.StyleTokenType.BorderStyle && startToken.type !== tokens_1.StyleTokenType.None) {
+            this.reportError("S004", startToken);
+            return null;
+        }
+        // --- Done.
+        this._lexer.get();
+        return this.createNode("BorderStyle", {
+            value: startToken.text,
+        }, startToken);
+    }
+    /**
+     * Parses a border (size, style, color in arbitrary order)
+     */
+    parseBorder() {
+        const startToken = this._lexer.peek();
+        const themeIdNode = this.tryThemeId();
+        let themeId1;
+        let maxStyleTokens = 3;
+        if (themeIdNode) {
+            if (this.testCompleted()) {
+                return themeIdNode;
+            }
+            maxStyleTokens = 2;
+            themeId1 = themeIdNode.themeId;
+        }
+        let sizeFound = null;
+        let styleFound = null;
+        let colorFound = null;
+        let themeId2;
+        let themeId3;
+        for (let i = 0; i < maxStyleTokens; i++) {
+            const nextToken = this._lexer.peek();
+            if (isThemeId(nextToken)) {
+                if (!themeId2) {
+                    themeId2 = this.parseThemeId();
+                }
+                else {
+                    themeId3 = this.parseThemeId();
+                }
+            }
+            else {
+                switch (nextToken.type) {
+                    case tokens_1.StyleTokenType.Number:
+                        if (sizeFound) {
+                            this.reportError("S016", nextToken);
+                            return null;
+                        }
+                        sizeFound = this.parseSize();
+                        break;
+                    case tokens_1.StyleTokenType.BorderStyle:
+                        if (styleFound) {
+                            this.reportError("S016", nextToken);
+                            return null;
+                        }
+                        styleFound = this.parseBorderStyle();
+                        break;
+                    case tokens_1.StyleTokenType.ColorName:
+                    case tokens_1.StyleTokenType.ColorFunc:
+                    case tokens_1.StyleTokenType.HexaColor:
+                        if (colorFound) {
+                            this.reportError("S016", nextToken);
+                            return null;
+                        }
+                        colorFound = this.parseColor();
+                        break;
+                    default:
+                        this.reportError("S016", nextToken);
+                        return null;
+                }
+            }
+            const spToken = this._lexer.peek(true);
+            if (spToken.type === tokens_1.StyleTokenType.Eof)
+                break;
+            if (spToken.type === tokens_1.StyleTokenType.Ws) {
+                this._lexer.get(true);
+            }
+        }
+        return this.createNode("Border", {
+            themeId1,
+            themeId2,
+            themeId3,
+            widthValue: sizeFound === null || sizeFound === void 0 ? void 0 : sizeFound.value,
+            widthUnit: sizeFound === null || sizeFound === void 0 ? void 0 : sizeFound.unit,
+            color: colorFound === null || colorFound === void 0 ? void 0 : colorFound.value,
+            styleValue: styleFound === null || styleFound === void 0 ? void 0 : styleFound.value,
+        }, startToken);
+    }
+    /**
+     * Parses a color value
+     */
+    parseColor() {
+        const startToken = this._lexer.peek();
+        const themeIdNode = this.tryThemeId();
+        if (themeIdNode)
+            return themeIdNode;
+        const parser = this;
+        switch (startToken.type) {
+            case tokens_1.StyleTokenType.ColorName:
+                this._lexer.get();
+                return this.createNode("Color", {
+                    value: startToken.text.toLowerCase(),
+                }, startToken);
+            case tokens_1.StyleTokenType.HexaColor:
+                this._lexer.get();
+                return this.createNode("Color", {
+                    value: startToken.text,
+                }, startToken);
+            case tokens_1.StyleTokenType.ColorFunc:
+                let success = false;
+                switch (startToken.text) {
+                    case "rgb":
+                        success = parseColorParameters(["V%", "V%", "V%"]);
+                        break;
+                    case "rgba":
+                        success = parseColorParameters(["V%", "V%", "V%", "alpha"]);
+                        break;
+                    case "hsl":
+                        success = parseColorParameters(["angle", "%", "%"]);
+                        break;
+                    case "hsla":
+                        success = parseColorParameters(["angle", "%", "%", "alpha"]);
+                        break;
+                    default:
+                        this.reportError("S006", startToken, startToken.text);
+                        return null;
+                }
+                if (success) {
+                    return {
+                        type: "Color",
+                        startPosition: startToken.start,
+                        endPosition: this._lexer.peek().start,
+                        value: this.getSource(startToken, this._lexer.peek()),
+                    };
+                }
+                return null;
+            default:
+                this.reportError("S005", startToken);
+                return null;
+        }
+        function parseColorParameters(pars) {
+            // --- Skip the color function name token
+            parser._lexer.get();
+            // --- Expect "("
+            parser.expectToken(tokens_1.StyleTokenType.LParent, "S007");
+            // --- Iterate through pars
+            for (let i = 0; i < pars.length; i++) {
+                // --- Get the parameter value
+                const value = parser.getNumber();
+                if (value === null)
+                    return false;
+                // --- Get optional parameter unit
+                const unit = parser._lexer.peek(true);
+                // --- Process the value & unit
+                switch (pars[i]) {
+                    // 0-255 or 0%-100%
+                    case "V%":
+                        if (unit.type === tokens_1.StyleTokenType.Percentage) {
+                            if (value < 0 || value > 100) {
+                                parser.reportError("S008");
+                                return false;
+                            }
+                            parser._lexer.get();
+                        }
+                        else {
+                            if (value < 0 || value > 255) {
+                                parser.reportError("S009");
+                                return false;
+                            }
+                        }
+                        break;
+                    // 0%-100%
+                    case "%":
+                        if (unit.type !== tokens_1.StyleTokenType.Percentage || value < 0 || value > 100) {
+                            parser.reportError("S008");
+                            return false;
+                        }
+                        parser._lexer.get();
+                        break;
+                    case "angle":
+                        if (unit.type === tokens_1.StyleTokenType.Angle) {
+                            parser._lexer.get();
+                        }
+                        break;
+                    // alpha with units
+                    case "alpha":
+                        if (unit.type === tokens_1.StyleTokenType.Percentage) {
+                            if (value < 0 || value > 100) {
+                                parser.reportError("S008");
+                                return false;
+                            }
+                            parser._lexer.get();
+                        }
+                        else {
+                            if (value < 0 || value > 1) {
+                                parser.reportError("S011");
+                                return false;
+                            }
+                        }
+                        break;
+                }
+                // --- No separator expected after the last parameter
+                if (i === pars.length - 1)
+                    continue;
+                // --- Process the separator
+                let sepToken = parser._lexer.peek(true);
+                if (sepToken.type === tokens_1.StyleTokenType.Ws) {
+                    parser._lexer.get();
+                    sepToken = parser._lexer.peek(true);
+                    if (sepToken.type === tokens_1.StyleTokenType.Comma) {
+                        parser._lexer.get();
+                    }
+                }
+                else {
+                    parser.expectToken(tokens_1.StyleTokenType.Comma);
+                }
+                sepToken = parser._lexer.peek();
+                if (sepToken.type === tokens_1.StyleTokenType.Ws) {
+                    parser._lexer.get();
+                }
+            }
+            // --- Process the optional separator
+            let aSepToken = parser._lexer.peek();
+            if (aSepToken.type === tokens_1.StyleTokenType.Ws) {
+                parser._lexer.get();
+            }
+            // --- Expect ")"
+            parser.expectToken(tokens_1.StyleTokenType.RParent, "S010");
+            return true;
+        }
+    }
+    /**
+     * Parses a text decoration value
+     */
+    parseTextDecoration() {
+        const startToken = this._lexer.peek();
+        if (startToken.type === tokens_1.StyleTokenType.None) {
+            this._lexer.get();
+            return this.createNode("TextDecoration", {
+                none: true,
+            }, startToken);
+        }
+        const themeIdNode = this.tryThemeId();
+        let themeId1;
+        let maxStyleTokens = 3;
+        if (themeIdNode) {
+            if (this.testCompleted()) {
+                return themeIdNode;
+            }
+            maxStyleTokens = 2;
+            themeId1 = themeIdNode.themeId;
+        }
+        const acceptedStyles = ["solid", "double", "dotted", "dashed", "wavy"];
+        let lineFound;
+        let styleFound;
+        let colorFound = null;
+        let themeId2;
+        let themeId3;
+        for (let i = 0; i < maxStyleTokens; i++) {
+            const nextToken = this._lexer.peek();
+            if (isThemeId(nextToken)) {
+                if (!themeId2) {
+                    themeId2 = this.parseThemeId();
+                }
+                else {
+                    themeId3 = this.parseThemeId();
+                }
+            }
+            else {
+                if (acceptedStyles.indexOf(nextToken.text) >= 0) {
+                    styleFound = nextToken.text;
+                    this._lexer.get();
+                }
+                else {
+                    switch (nextToken.type) {
+                        case tokens_1.StyleTokenType.DecorationLine:
+                            if (lineFound) {
+                                this.reportError("S016", nextToken);
+                                return null;
+                            }
+                            this._lexer.get();
+                            lineFound = nextToken.text;
+                            break;
+                        case tokens_1.StyleTokenType.ColorName:
+                        case tokens_1.StyleTokenType.ColorFunc:
+                        case tokens_1.StyleTokenType.HexaColor:
+                            if (colorFound) {
+                                this.reportError("S016", nextToken);
+                                return null;
+                            }
+                            colorFound = this.parseColor();
+                            break;
+                        default:
+                            this.reportError("S016", nextToken);
+                            return null;
+                    }
+                }
+            }
+            const spToken = this._lexer.peek(true);
+            if (spToken.type === tokens_1.StyleTokenType.Eof)
+                break;
+            if (spToken.type === tokens_1.StyleTokenType.Ws) {
+                this._lexer.get(true);
+            }
+        }
+        return this.createNode("TextDecoration", {
+            themeId1,
+            themeId2,
+            themeId3,
+            color: colorFound === null || colorFound === void 0 ? void 0 : colorFound.value,
+            style: styleFound,
+            line: lineFound,
+        }, startToken);
+    }
+    /**
+     * Parses a radius value
+     */
+    parseRadius() {
+        var _a, _b, _c, _d;
+        const values = [];
+        const themeIds = [];
+        const startToken = this._lexer.peek();
+        let count = 0;
+        while (count < 2) {
+            // --- Resolve to theme id or size
+            const themeIdNode = this.tryThemeId();
+            if (themeIdNode) {
+                themeIds[count] = themeIdNode.themeId;
+                if (this._lexer.peek().type === tokens_1.StyleTokenType.Eof) {
+                    // --- No more token
+                    count = 5;
+                }
+                else {
+                    // --- Skip trailing spaces
+                    while (this._lexer.peek(true).type === tokens_1.StyleTokenType.Ws) {
+                        this._lexer.get(true);
+                    }
+                }
+            }
+            else {
+                let size = this.parseSize();
+                if (!size) {
+                    return null;
+                }
+                values[count] = size;
+                // --- Search for the end/whitespace
+                let wsCount = 0;
+                while (true) {
+                    let nextToken = this._lexer.peek(true);
+                    if (nextToken.type === tokens_1.StyleTokenType.Eof) {
+                        // --- No more token
+                        count = 5;
+                        wsCount = 1;
+                        break;
+                    }
+                    if (nextToken.type === tokens_1.StyleTokenType.Ws) {
+                        // Skip the whitespace
+                        this._lexer.get(true);
+                        wsCount++;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                // --- We need a separator
+                if (!wsCount) {
+                    this.reportError("S016");
+                    return null;
+                }
+            }
+            // --- Next item
+            count++;
+        }
+        return this.createNode("Radius", {
+            themeId1: themeIds[0],
+            themeId2: themeIds[1],
+            value1: (_a = values[0]) === null || _a === void 0 ? void 0 : _a.value,
+            unit1: (_b = values[0]) === null || _b === void 0 ? void 0 : _b.unit,
+            value2: (_c = values[1]) === null || _c === void 0 ? void 0 : _c.value,
+            unit2: (_d = values[1]) === null || _d === void 0 ? void 0 : _d.unit,
+        }, startToken);
+    }
+    /**
+     * Parses a shadow value
+     */
+    parseShadow() {
+        const startToken = this._lexer.peek();
+        const themeIdNode = this.tryThemeId();
+        if (themeIdNode)
+            return themeIdNode;
+        const segments = [];
+        let nextToken = null;
+        // --- Parse a single segment
+        while (true) {
+            let inset = null;
+            let sizeX = null;
+            let sizeY = null;
+            let blurRadius = null;
+            let spreadRadius = null;
+            let color = null;
+            nextToken = this._lexer.peek();
+            if (nextToken.text === "inset") {
+                inset = true;
+                this._lexer.get();
+                nextToken = this._lexer.peek();
+            }
+            // --- Offset values
+            sizeX = this.parseSize();
+            if (!sizeX) {
+                return null;
+            }
+            nextToken = this._lexer.peek(true);
+            if (nextToken.type !== tokens_1.StyleTokenType.Ws) {
+                this.reportError("S016", nextToken);
+            }
+            this._lexer.get();
+            sizeY = this.parseSize();
+            if (!sizeY) {
+                return null;
+            }
+            nextToken = this._lexer.peek(true);
+            if (nextToken.type === tokens_1.StyleTokenType.Ws) {
+                this._lexer.get();
+                nextToken = this._lexer.peek();
+                if (nextToken.type === tokens_1.StyleTokenType.Number) {
+                    // --- Blur radius
+                    blurRadius = this.parseSize();
+                    nextToken = this._lexer.peek(true);
+                }
+                if (nextToken.type === tokens_1.StyleTokenType.Ws) {
+                    this._lexer.get();
+                    nextToken = this._lexer.peek();
+                    if (nextToken.type === tokens_1.StyleTokenType.Number) {
+                        // --- Spread radius
+                        spreadRadius = this.parseSize();
+                        nextToken = this._lexer.peek(true);
+                    }
+                }
+            }
+            // --- Check for color
+            if (nextToken.type === tokens_1.StyleTokenType.Ws) {
+                nextToken = this._lexer.get();
+            }
+            if (nextToken.type !== tokens_1.StyleTokenType.Eof && nextToken.type !== tokens_1.StyleTokenType.Comma) {
+                color = this.parseColor();
+            }
+            // --- Create segment
+            segments.push({
+                inset: inset !== null && inset !== void 0 ? inset : undefined,
+                offsetXValue: sizeX.value,
+                offsetXUnit: sizeX.unit,
+                offsetYValue: sizeY.value,
+                offsetYUnit: sizeY.unit,
+                blurRadiusValue: blurRadius === null || blurRadius === void 0 ? void 0 : blurRadius.value,
+                blurRadiusUnit: blurRadius === null || blurRadius === void 0 ? void 0 : blurRadius.unit,
+                spreadRadiusValue: spreadRadius === null || spreadRadius === void 0 ? void 0 : spreadRadius.value,
+                spreadRadiusUnit: spreadRadius === null || spreadRadius === void 0 ? void 0 : spreadRadius.unit,
+                color: color === null || color === void 0 ? void 0 : color.value,
+            });
+            // --- Check for next segment
+            const sp = this._lexer.peek(true);
+            if (sp.type === tokens_1.StyleTokenType.Comma) {
+                // --- There is a next shadow segment
+                this._lexer.get();
+            }
+            else {
+                break;
+            }
+        }
+        return this.createNode("Shadow", {
+            segments,
+        }, startToken);
+    }
+    getNumber() {
+        const token = this._lexer.get();
+        if (token.type === tokens_1.StyleTokenType.Number) {
+            return parseFloat(token.text);
+        }
+        this.reportError("S001", token);
+        return null;
+    }
+    expectToken(type, errorCode, allowEof) {
+        const next = this._lexer.peek();
+        if (next.type === type || (allowEof && next.type === tokens_1.StyleTokenType.Eof)) {
+            // --- Skip the expected token
+            return this._lexer.get();
+        }
+        this.reportError(errorCode !== null && errorCode !== void 0 ? errorCode : "S007", next, next.text);
+        return null;
+    }
+    /**
+     * Reports the specified error
+     * @param errorCode Error code
+     * @param token Token that represents the error's position
+     * @param options Error message options
+     */
+    reportError(errorCode, token, ...options) {
+        var _a;
+        let errorText = (_a = errors_1.styleErrorMessages[errorCode]) !== null && _a !== void 0 ? _a : "Unknown error";
+        if (options) {
+            options.forEach((o, idx) => (errorText = replace(errorText, `{${idx}}`, options[idx].toString())));
+        }
+        if (!token) {
+            token = this._lexer.peek(true);
+        }
+        this._parseErrors.push({
+            code: errorCode,
+            text: errorText,
+            position: token.start,
+        });
+        throw new errors_1.StyleParserError(errorText, errorCode);
+        function replace(input, placeholder, replacement) {
+            do {
+                input = input.replace(placeholder, replacement);
+            } while (input.includes(placeholder));
+            return input;
+        }
+    }
+    /**
+     * Creates an expression node
+     * @param type Expression type
+     * @param stump Stump properties
+     * @param startToken The token that starts the expression
+     * @param endToken The token that ends the expression
+     * @param source Expression source code to store to the node
+     */
+    createNode(type, stump, startToken, endToken, source) {
+        if (!endToken) {
+            endToken = this._lexer.peek(true);
+        }
+        const startPosition = startToken.start;
+        const endPosition = endToken.start;
+        return Object.assign({}, stump, {
+            type,
+            startPosition,
+            endPosition,
+            source: source !== null && source !== void 0 ? source : this.getSource(startToken, endToken),
+        });
+    }
+    /**
+     * Gets the source code for the specified token range
+     * @param start Start token
+     * @param end Optional end token
+     * @returns The source code for the token range
+     */
+    getSource(start, end) {
+        if (!end)
+            end = this._lexer.peek();
+        return this.source.substring(start.start, end.start);
+    }
+    tryThemeId() {
+        const token = this._lexer.peek();
+        if (isThemeId(token)) {
+            return this.createNode("Boolean", {
+                themeId: this.parseThemeId(),
+            }, token);
+        }
+        return null;
+    }
+    parseThemeId() {
+        const startToken = this._lexer.peek();
+        this._lexer.get();
+        return {
+            id: startToken.text,
+        };
+    }
+    /**
+     * Parses a size value with its unit
+     */
+    parseSizeLike(defUnit = "") {
+        const startToken = this._lexer.peek();
+        const themeIdNode = this.tryThemeId();
+        if (themeIdNode)
+            return themeIdNode;
+        if (startToken.type === tokens_1.StyleTokenType.Star) {
+            this._lexer.get();
+            const nextToken = this._lexer.peek(true);
+            if (nextToken.type === tokens_1.StyleTokenType.Ws) {
+                this._lexer.get(true);
+            }
+            else if (nextToken.type !== tokens_1.StyleTokenType.Eof) {
+                this.reportError("S016", nextToken);
+                return null;
+            }
+            // --- Done with "*"
+            return this.createNode("Size", {
+                value: 1,
+                unit: "*",
+            }, startToken);
+        }
+        const value = this.getNumber();
+        if (value === null)
+            return null;
+        // --- Get the unit
+        let unit = "";
+        const unitToken = this._lexer.peek(true);
+        if (unitToken.type === tokens_1.StyleTokenType.SizeUnit ||
+            unitToken.type === tokens_1.StyleTokenType.Star ||
+            unitToken.type === tokens_1.StyleTokenType.Percentage) {
+            unit = this._lexer.get(true).text;
+        }
+        else if (unitToken.type === tokens_1.StyleTokenType.Ws) {
+            this._lexer.get(true);
+        }
+        else if (unitToken.type !== tokens_1.StyleTokenType.Eof) {
+            this.reportError("S016", unitToken);
+            return null;
+        }
+        // --- Done.
+        return this.createNode("Size", {
+            value,
+            unit: unit ? unit : value ? defUnit : "",
+        }, startToken);
+    }
+}
+exports.StyleParser = StyleParser;
+/**
+ * Tests if the specified token is a theme identifier
+ * @param value Token to test
+ */
+function isThemeId(value) {
+    return value.type === tokens_1.StyleTokenType.Identifier && value.text.charAt(0) === "$";
+}
+/**
+ * Converts the specified themeID to a CSS var string
+ * @param c segment to convert
+ */
+function toCssVar(c) {
+    if (typeof c === "string") {
+        return `var(--${exports.THEME_VAR_PREFIX}-${c.substring(1)})`;
+    }
+    if (c.defaultValue && c.defaultValue.length > 0) {
+        let defaultValueString = "";
+        for (const segment of c.defaultValue) {
+            defaultValueString += typeof segment === "string" ? segment : toCssVar(segment);
+        }
+        return `var(--${exports.THEME_VAR_PREFIX}-${c.id.substring(1)}, ${defaultValueString})`;
+    }
+    else {
+        return `var(--${exports.THEME_VAR_PREFIX}-${c.id.substring(1)})`;
+    }
+}