feat(css): Added optional css-tree parser (#8076)

* feat(css): Added optional css-tree parser

* test: css-tree parser compat tests

* test: more css-tree compat tests

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

@@ -0,0 +1,140 @@
+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)).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)).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)
+        };
+    }
+
+    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);
+}