NativeScript/nativescript-core/css/css-tree-parser.ts

import {
    parse
} from "css-tree";

function mapSelectors(selector: string): string[] {
    if (!selector) {
        return [];
    }

    return selector.split(/\s*(?![^(]*\)),\s*/).map(s => s.replace(/\u200C/g, ","));
}

function mapPosition(node, css) {
    let res: any = {
        start: {
            line: node.loc.start.line,
            column: node.loc.start.column
        },
        end: {
            line: node.loc.end.line,
            column: node.loc.end.column
        },
        content: css
    };

    if (node.loc.source && node.loc.source !== "<unknown>") {
        res.source = node.loc.source;
    }

    return res;
}

function transformAst(node, css, type = null) {
    if (!node) {
        return;
    }

    if (node.type === "StyleSheet") {
        return {
            type: "stylesheet",
            stylesheet: {
                rules: node.children.map(child => transformAst(child, css)).filter(child => child !== null).toArray(),
                parsingErrors: []
            }
        };
    }

    if (node.type === "Atrule") {
        let atrule: any = {
            type: node.name,
        };

        if (node.name === "supports" || node.name === "media") {
            atrule[node.name] = node.prelude.value;
            atrule.rules = transformAst(node.block, css);
        } else if (node.name === "page") {
            atrule.selectors = node.prelude ? mapSelectors(node.prelude.value) : [];
            atrule.declarations = transformAst(node.block, css);
        } else if (node.name === "document") {
            atrule.document = node.prelude ? node.prelude.value : "";
            atrule.vendor = "";
            atrule.rules = transformAst(node.block, css);
        } else if (node.name === "font-face") {
            atrule.declarations = transformAst(node.block, css);
        } else if (node.name === "import" || node.name === "charset" || node.name === "namespace") {
            atrule[node.name] = node.prelude ? node.prelude.value : "";
        } else if (node.name === "keyframes") {
            atrule.name = node.prelude ? node.prelude.value : "";
            atrule.keyframes = transformAst(node.block, css, "keyframe");
            atrule.vendor = undefined;
        } else {
            atrule.rules = transformAst(node.block, css);
        }

        atrule.position = mapPosition(node, css);

        return atrule;
    }

    if (node.type === "Block") {
        return node.children.map(child => transformAst(child, css, type)).filter(child => child !== null).toArray();
    }

    if (node.type === "Rule") {
        let value = node.prelude.value;

        let res: any = {
            type: type != null ? type : "rule",
            declarations: transformAst(node.block, css),
            position: mapPosition(node, css)
        };

        if (type === "keyframe") {
            res.values = mapSelectors(value);
        } else {
            res.selectors = mapSelectors(value);
        }

        return res;
    }

    if (node.type === "Comment") {
        return {
            type: "comment",
            comment: node.value,
            position: mapPosition(node, css)
        };
    }

    if (node.type === "Declaration") {
        return {
            type: "declaration",
            property: node.property,
            value: node.value.value ? node.value.value.trim() : "",
            position: mapPosition(node, css)
        };
    }

    if (node.type === "Raw") {
        return null;
    }

    throw Error(`Unknown node type ${node.type}`);
}

export function cssTreeParse(css, source): any {
    let errors = [];
    let ast = parse(css, {
        parseValue: false,
        parseAtrulePrelude: false,
        parseRulePrelude: false,
        positions: true,
        filename: source,
        onParseError: error => {
            errors.push(`${source}:${error.line}:${error.column}: ${error.formattedMessage}`);
        }
    });

    if (errors.length > 0) {
        throw new Error(errors[0]);
    }

    return transformAst(ast, css);
}