feat(css): Added optional css-tree parser

darind · darind · commit 680b6b63eceb · 2019-11-11T17:13:00.000+02:00
diff --git a/nativescript-core/css/css-tree-parser.ts b/nativescript-core/css/css-tree-parser.ts
@@ -0,0 +1,121 @@
+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) {
+    return {
+        start: {
+            line: node.loc.start.line,
+            column: node.loc.start.column
+        },
+        end: {
+            line: node.loc.end.line,
+            column: node.loc.end.column
+        }
+    };
+}
+
+function transformAst(node) {
+    if (!node) {
+        return;
+    }
+
+    if (node.type === "StyleSheet") {
+        return {
+            type: "stylesheet",
+            stylesheet: {
+                source: node.loc.source,
+                rules: node.children.toArray().map(child => transformAst(child)),
+                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);
+        } else if (node.name === "page") {
+            atrule.selectors = node.prelude ? mapSelectors(node.prelude.value) : [];
+            atrule.declarations = transformAst(node.block);
+        } else if (node.name === "document") {
+            atrule.document = node.prelude ? node.prelude.value : "";
+            atrule.vendor = "";
+            atrule.rules = transformAst(node.block);
+        } else if (node.name === "font-face") {
+            atrule.declarations = transformAst(node.block);
+        } else if (node.name === "import" || node.name === "charset" || node.name === "namespace") {
+            atrule[node.name] = node.prelude ? node.prelude.value : "";
+        } else {
+            atrule.rules = transformAst(node.block);
+        }
+
+        return atrule;
+    }
+
+    if (node.type === "Block") {
+        return node.children.toArray().map(child => transformAst(child));
+    }
+
+    if (node.type === "Rule") {
+        let value = node.prelude.value;
+
+        return {
+            type: "rule",
+            selectors: mapSelectors(value),
+            declarations: transformAst(node.block),
+            position: mapPosition(node)
+        };
+    }
+
+    if (node.type === "Comment") {
+        return {
+            type: "comment",
+            comment: node.value,
+            position: mapPosition(node)
+        };
+    }
+
+    if (node.type === "Declaration") {
+        return {
+            type: "declaration",
+            property: node.property,
+            value: node.value.value,
+            position: mapPosition(node)
+        };
+    }
+
+    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);
+}
diff --git a/nativescript-core/package.json b/nativescript-core/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "nativescript-hook": "0.2.5",
     "reduce-css-calc": "^2.1.6",
+    "css-tree": "^1.0.0-alpha.37",
     "semver": "6.3.0",
     "tns-core-modules-widgets": "next",
     "tslib": "1.10.0"
diff --git a/nativescript-core/ui/styling/style-scope.ts b/nativescript-core/ui/styling/style-scope.ts
@@ -12,6 +12,9 @@ import {
     CSS3Parser,
     CSSNativeScript
 } from "../../css/parser";
+import {
+    cssTreeParse
+} from "../../css/css-tree-parser";
 
 import {
     RuleSet,
@@ -50,11 +53,15 @@ function ensureCssAnimationParserModule() {
     }
 }
 
-let parser: "rework" | "nativescript" = "rework";
+let parser: "rework" | "nativescript" | "css-tree" = "rework";
 try {
     const appConfig = require("~/package.json");
-    if (appConfig && appConfig.cssParser === "nativescript") {
-        parser = "nativescript";
+    if (appConfig) {
+        if (appConfig.cssParser === "css-tree") {
+            parser = "css-tree";
+        } else if (appConfig.cssParser === "nativescript") {
+            parser = "nativescript";
+        }
     }
 } catch (e) {
     //
@@ -220,6 +227,10 @@ class CSSSource {
     private parseCSSAst() {
         if (this._source) {
             switch (parser) {
+                case "css-tree":
+                    this._ast = cssTreeParse(this._source, this._file);
+
+                    return;
                 case "nativescript":
                     const cssparser = new CSS3Parser(this._source);
                     const stylesheet = cssparser.parseAStylesheet();
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "@types/node": "~10.12.18",
     "chai": "^4.1.2",
     "css": "^2.2.1",
-    "css-tree": "^1.0.0-alpha24",
+    "css-tree": "^1.0.0-alpha.37",
     "gonzales": "^1.0.7",
     "madge": "^2.2.0",
     "markdown-snippet-injector": "0.2.2",
