More friendly Css parser error messages

ui/page/page-common.ts

@@ -5,7 +5,6 @@ import frame = require("ui/frame");
 import styleScope = require("ui/styling/style-scope");
 import fs = require("file-system");
 import fileSystemAccess = require("file-system/file-system-access");
-import trace = require("trace");
 
 export module knownEvents {
     export var navigatedTo = "navigatedTo";
@@ -53,7 +52,11 @@ export class Page extends contentView.ContentView implements dts.Page {
     }
 
     public addCss(cssString: string): void {
-        this._styleScope.addCss(cssString);
+        this._addCssInternal(cssString, undefined);
+    }
+
+    private _addCssInternal(cssString: string, cssFileName: string): void {
+        this._styleScope.addCss(cssString, cssFileName);
         this._refreshCss();
     }
 
@@ -62,7 +65,7 @@ export class Page extends contentView.ContentView implements dts.Page {
         var realCssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFileName);
         if (fs.File.exists(realCssFileName)) {
             new fileSystemAccess.FileSystemAccess().readText(realCssFileName, r => { cssString = r; });
-            this.addCss(cssString);
+            this._addCssInternal(cssString, cssFileName);
         }
     }
 
@@ -101,22 +104,18 @@ export class Page extends contentView.ContentView implements dts.Page {
             return;
         }
 
-        try {
-            this._styleScope.ensureSelectors();
+        this._styleScope.ensureSelectors();
 
-            var scope = this._styleScope;
-            var checkSelectors = (view: view.View): boolean => {
-                scope.applySelectors(view);
-                return true;
-            }
-
-            checkSelectors(this);
-            view.eachDescendant(this, checkSelectors);
-
-            this._cssApplied = true;
-        } catch (e) {
-            trace.write("Css styling failed: " + e, trace.categories.Style);
+        var scope = this._styleScope;
+        var checkSelectors = (view: view.View): boolean => {
+            scope.applySelectors(view);
+            return true;
         }
+
+        checkSelectors(this);
+        view.eachDescendant(this, checkSelectors);
+
+        this._cssApplied = true;
     }
 
     private _resetCssValues() {

ui/styling/style-scope.ts

@@ -12,6 +12,7 @@ export class StyleScope {
     private _viewIdToKey = {};
 
     private _css: string;
+    private _cssFileName: string;
     private _cssSelectors: Array<cssSelector.CssSelector>;
 
     get css(): string {
@@ -19,33 +20,44 @@ export class StyleScope {
     }
     set css(value: string) {
         this._css = value;
+        this._cssFileName = undefined;
         this._cssSelectors = undefined;
         this._reset();
     }
 
-    public addCss(cssString: string): void {
+    public addCss(cssString: string, cssFileName: string): void {
         if (this._css === undefined) {
             this._css = cssString;
         }
         else {
             this._css += cssString;
         }
+        this._cssFileName = cssFileName;
         this._reset();
         if (this._cssSelectors) {
-            var addedCssTree = cssParser.parse(cssString, undefined);
-            var addedSelectors = StyleScope.createSelectorsFromSyntaxTree(addedCssTree);
+            var addedSelectors = StyleScope.createSelectorsFromCss(cssString, cssFileName);
             this._cssSelectors = this._joinCssSelectorsArrays([this._cssSelectors, addedSelectors]);
         }
     }
 
+    public static createSelectorsFromCss(css: string, cssFileName: string): cssSelector.CssSelector[] {
+        try {
+            var pageCssSyntaxTree = css ? cssParser.parse(css, { source: cssFileName }) : null;
+            var pageCssSelectors;
+            if (pageCssSyntaxTree) {
+                pageCssSelectors = StyleScope.createSelectorsFromSyntaxTree(pageCssSyntaxTree);
+            }
+            return pageCssSelectors;
+        }
+        catch (e) {
+            trace.write("Css styling failed: " + e, trace.categories.Error, trace.messageType.error);
+        }
+    }
+
     public ensureSelectors() {
         if (!this._cssSelectors && (this._css || application.cssSelectorsCache)) {
             var applicationCssSelectors = application.cssSelectorsCache ? application.cssSelectorsCache : null;
-            var pageCssSyntaxTree = this._css ? cssParser.parse(this._css, undefined) : null;
-            var pageCssSelectors;
-            if (pageCssSyntaxTree) {
-                pageCssSelectors = StyleScope.createSelectorsFromSyntaxTree(pageCssSyntaxTree);
-            }
+            var pageCssSelectors = StyleScope.createSelectorsFromCss(this._css, this._cssFileName);
             this._cssSelectors = this._joinCssSelectorsArrays([applicationCssSelectors, pageCssSelectors]);
         }
     }
@@ -131,7 +143,7 @@ export class StyleScope {
         }
     }
 
-    public static createSelectorsFromSyntaxTree(ast: cssParser.SyntaxTree): Array<cssSelector.CssSelector> {
+    private static createSelectorsFromSyntaxTree(ast: cssParser.SyntaxTree): Array<cssSelector.CssSelector> {
         var result: Array<cssSelector.CssSelector> = [];
 
         var rules = ast.stylesheet.rules;
@@ -168,6 +180,6 @@ export function applyInlineSyle(view: view.View, style: string) {
         var filteredDeclarations = syntaxTree.stylesheet.rules[0].declarations.filter((val, i, arr) => { return val.type === "declaration" });
         cssSelector.applyInlineSyle(view, filteredDeclarations);
     } catch (ex) {
-        trace.write("Applying local style failed: " + ex, trace.categories.Style);
+        trace.write("Applying local style failed: " + ex, trace.categories.Error, trace.messageType.error);
     }
 }