Skip to content

Commit d56d036

Browse files
author
Nedyalko Nikolov
committed
More friendly Css parser error messages
1 parent 075bd3c commit d56d036

File tree

10 files changed

+109
-42
lines changed

10 files changed

+109
-42
lines changed

‎CrossPlatformModules.csproj

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -514,6 +514,7 @@
514514
<Content Include="apps\gallery-app\layouts\dock-layout.xml" />
515515
<Content Include="apps\template-settings\app.css" />
516516
<Content Include="apps\tests\app\binding_tests.xml" />
517+
<Content Include="apps\tests\ui\label\label-tests-wrong.css" />
517518
<Content Include="apps\ui-tests-app\pages\i86.xml" />
518519
<Content Include="apps\template-blank\app.css" />
519520
<Content Include="apps\template-hello-world\app.css" />
@@ -1474,7 +1475,7 @@
14741475
<SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
14751476
</WebProjectProperties>
14761477
</FlavorProperties>
1477-
<UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
1478+
<UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
14781479
</VisualStudio>
14791480
</ProjectExtensions>
14801481
</Project>

‎application/application-common.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
require("globals");
22
import definition = require("application");
3-
import cssParser = require("js-libs/reworkcss");
43
import fs = require("file-system");
54
import fileSystemAccess = require("file-system/file-system-access");
65
import styleScope = require("ui/styling/style-scope");
@@ -28,10 +27,8 @@ export function loadCss() {
2827
var cssFileName = fs.path.join(fs.knownFolders.currentApp().path, definition.cssFile);
2928
var applicationCss;
3029
if (fs.File.exists(cssFileName)) {
31-
// Read the CSS file.
3230
new fileSystemAccess.FileSystemAccess().readText(cssFileName, r => { applicationCss = r; });
33-
var applicationCssSyntaxTree = cssParser.parse(applicationCss, undefined);
34-
definition.cssSelectorsCache = styleScope.StyleScope.createSelectorsFromSyntaxTree(applicationCssSyntaxTree);
31+
definition.cssSelectorsCache = styleScope.StyleScope.createSelectorsFromCss(applicationCss, cssFileName);
3532
}
3633
}
3734
}

‎apps/tests/app/mainPage.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class MyTraceWriter implements trace.TraceWriter {
2020

2121
trace.addWriter(new MyTraceWriter());
2222
trace.enable();
23-
trace.setCategories(trace.categories.Test);
23+
trace.setCategories(trace.categories.Test + "," + trace.categories.Error);
2424

2525
var textView = new textViewModule.TextView();
2626
textView.editable = false;

‎apps/tests/ui/label/label-tests-wrong.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
label {
2+
<!--Test wrong comment-->
3+
background-color: red;
4+
}

‎apps/tests/ui/label/label-tests.ts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,25 @@ import page = require("ui/page");
2525
import textBase = require("ui/text-base");
2626
import enums = require("ui/enums");
2727
import labelTestsNative = require("./label-tests-native");
28+
import trace = require("trace");
29+
30+
var errorMessage;
31+
var errorTraceWriter = {
32+
write: function (message, category, messageType) {
33+
if (category === trace.categories.Error) {
34+
errorMessage = message;
35+
}
36+
}
37+
}
38+
39+
export var setUp = function () {
40+
trace.addWriter(errorTraceWriter);
41+
}
42+
43+
export var tearDown = function () {
44+
trace.removeWriter(errorTraceWriter);
45+
errorMessage = undefined;
46+
}
2847

2948
export var test_Label_Members = function () {
3049
var label = new LabelModule.Label();
@@ -487,3 +506,28 @@ export var testNativeTextAlignmentFromLocal = function () {
487506
TKUnit.assert(actualResult === expectedTextAlignment, "Actual: " + actualResult + "; Expected: " + expectedTextAlignment);
488507
});
489508
}
509+
510+
export var testErrorMessageWhenWrongCssIsAddedWithFile = function () {
511+
helper.buildUIAndRunTest(_createLabelFunc(), function (views: Array<view.View>) {
512+
var view = <LabelModule.Label>views[0];
513+
view.id = "testLabel";
514+
var page = <page.Page>views[1];
515+
errorMessage = undefined;
516+
page.addCssFile("/app/tests/ui/label/label-tests-wrong.css");
517+
518+
TKUnit.assertNotEqual(errorMessage, undefined);
519+
});
520+
521+
}
522+
523+
export var testErrorMessageWhenWrongCssIsAdded = function () {
524+
helper.buildUIAndRunTest(_createLabelFunc(), function (views: Array<view.View>) {
525+
var view = <LabelModule.Label>views[0];
526+
view.id = "testLabel";
527+
var page = <page.Page>views[1];
528+
errorMessage = undefined;
529+
page.addCss("label { < !--Test wrong comment-- > background-color: red; }");
530+
531+
TKUnit.assertNotEqual(errorMessage, undefined);
532+
});
533+
}

‎js-libs/reworkcss/reworkcss.js

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -57,17 +57,25 @@ module.exports.parse = function(css, options){
5757
*/
5858

5959
function error(msg) {
60-
if (options.silent === true) {
61-
return false;
62-
}
60+
if (options.silent === true) {
61+
return false;
62+
};
63+
64+
var errorMessage;
65+
if (options.source) {
66+
errorMessage = options.source + ':' + lineno + ':' + column + ': ' + msg;
67+
}
68+
else {
69+
errorMessage = "Parsing '" + css + "' issue an error: " + msg;
70+
}
6371

64-
var err = new Error(options.source + ':' + lineno + ':' + column + ': ' + msg);
65-
err.reason = msg;
66-
err.filename = options.source;
67-
err.line = lineno;
68-
err.column = column;
69-
err.source = css;
70-
throw err;
72+
var err = new Error(errorMessage);
73+
err.reason = msg;
74+
err.filename = options.source;
75+
err.line = lineno;
76+
err.column = column;
77+
err.source = css;
78+
throw err;
7179
}
7280

7381
/**

‎trace/trace.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ declare module "trace" {
6868
export var Navigation: string;
6969
export var Test: string;
7070
export var Binding: string;
71+
export var Error: string;
7172

7273
export var All: string;
7374

‎trace/trace.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,8 @@ export module categories {
107107
export var Navigation = "Navigation";
108108
export var Test = "Test";
109109
export var Binding = "Binding";
110-
export var All = VisualTreeEvents + "," + Layout + "," + Style + "," + ViewHierarchy + "," + NativeLifecycle + "," + Debug + "," + Navigation + "," + Test + "," + Binding;
110+
export var Error = "Error";
111+
export var All = VisualTreeEvents + "," + Layout + "," + Style + "," + ViewHierarchy + "," + NativeLifecycle + "," + Debug + "," + Navigation + "," + Test + "," + Binding + "," + Error;
111112

112113
export var separator = ",";
113114

‎ui/page/page-common.ts

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import frame = require("ui/frame");
55
import styleScope = require("ui/styling/style-scope");
66
import fs = require("file-system");
77
import fileSystemAccess = require("file-system/file-system-access");
8-
import trace = require("trace");
98

109
export module knownEvents {
1110
export var navigatedTo = "navigatedTo";
@@ -53,7 +52,11 @@ export class Page extends contentView.ContentView implements dts.Page {
5352
}
5453

5554
public addCss(cssString: string): void {
56-
this._styleScope.addCss(cssString);
55+
this._addCssInternal(cssString, undefined);
56+
}
57+
58+
private _addCssInternal(cssString: string, cssFileName: string): void {
59+
this._styleScope.addCss(cssString, cssFileName);
5760
this._refreshCss();
5861
}
5962

@@ -62,7 +65,7 @@ export class Page extends contentView.ContentView implements dts.Page {
6265
var realCssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFileName);
6366
if (fs.File.exists(realCssFileName)) {
6467
new fileSystemAccess.FileSystemAccess().readText(realCssFileName, r => { cssString = r; });
65-
this.addCss(cssString);
68+
this._addCssInternal(cssString, cssFileName);
6669
}
6770
}
6871

@@ -101,22 +104,18 @@ export class Page extends contentView.ContentView implements dts.Page {
101104
return;
102105
}
103106

104-
try {
105-
this._styleScope.ensureSelectors();
107+
this._styleScope.ensureSelectors();
106108

107-
var scope = this._styleScope;
108-
var checkSelectors = (view: view.View): boolean => {
109-
scope.applySelectors(view);
110-
return true;
111-
}
109+
var scope = this._styleScope;
110+
var checkSelectors = (view: view.View): boolean => {
111+
scope.applySelectors(view);
112+
return true;
113+
}
112114

113-
checkSelectors(this);
114-
view.eachDescendant(this, checkSelectors);
115+
checkSelectors(this);
116+
view.eachDescendant(this, checkSelectors);
115117

116-
this._cssApplied = true;
117-
} catch (e) {
118-
trace.write("Css styling failed: " + e, trace.categories.Style);
119-
}
118+
this._cssApplied = true;
120119
}
121120

122121
private _resetCssValues() {

‎ui/styling/style-scope.ts

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,40 +12,52 @@ export class StyleScope {
1212
private _viewIdToKey = {};
1313

1414
private _css: string;
15+
private _cssFileName: string;
1516
private _cssSelectors: Array<cssSelector.CssSelector>;
1617

1718
get css(): string {
1819
return this._css;
1920
}
2021
set css(value: string) {
2122
this._css = value;
23+
this._cssFileName = undefined;
2224
this._cssSelectors = undefined;
2325
this._reset();
2426
}
2527

26-
public addCss(cssString: string): void {
28+
public addCss(cssString: string, cssFileName: string): void {
2729
if (this._css === undefined) {
2830
this._css = cssString;
2931
}
3032
else {
3133
this._css += cssString;
3234
}
35+
this._cssFileName = cssFileName;
3336
this._reset();
3437
if (this._cssSelectors) {
35-
var addedCssTree = cssParser.parse(cssString, undefined);
36-
var addedSelectors = StyleScope.createSelectorsFromSyntaxTree(addedCssTree);
38+
var addedSelectors = StyleScope.createSelectorsFromCss(cssString, cssFileName);
3739
this._cssSelectors = this._joinCssSelectorsArrays([this._cssSelectors, addedSelectors]);
3840
}
3941
}
4042

41-
public ensureSelectors() {
42-
if (!this._cssSelectors && (this._css || application.cssSelectorsCache)) {
43-
var applicationCssSelectors = application.cssSelectorsCache ? application.cssSelectorsCache : null;
44-
var pageCssSyntaxTree = this._css ? cssParser.parse(this._css, undefined) : null;
43+
public static createSelectorsFromCss(css: string, cssFileName: string): cssSelector.CssSelector[] {
44+
try {
45+
var pageCssSyntaxTree = css ? cssParser.parse(css, { source: cssFileName }) : null;
4546
var pageCssSelectors;
4647
if (pageCssSyntaxTree) {
4748
pageCssSelectors = StyleScope.createSelectorsFromSyntaxTree(pageCssSyntaxTree);
4849
}
50+
return pageCssSelectors;
51+
}
52+
catch (e) {
53+
trace.write("Css styling failed: " + e, trace.categories.Error, trace.messageType.error);
54+
}
55+
}
56+
57+
public ensureSelectors() {
58+
if (!this._cssSelectors && (this._css || application.cssSelectorsCache)) {
59+
var applicationCssSelectors = application.cssSelectorsCache ? application.cssSelectorsCache : null;
60+
var pageCssSelectors = StyleScope.createSelectorsFromCss(this._css, this._cssFileName);
4961
this._cssSelectors = this._joinCssSelectorsArrays([applicationCssSelectors, pageCssSelectors]);
5062
}
5163
}
@@ -131,7 +143,7 @@ export class StyleScope {
131143
}
132144
}
133145

134-
public static createSelectorsFromSyntaxTree(ast: cssParser.SyntaxTree): Array<cssSelector.CssSelector> {
146+
private static createSelectorsFromSyntaxTree(ast: cssParser.SyntaxTree): Array<cssSelector.CssSelector> {
135147
var result: Array<cssSelector.CssSelector> = [];
136148

137149
var rules = ast.stylesheet.rules;
@@ -168,6 +180,6 @@ export function applyInlineSyle(view: view.View, style: string) {
168180
var filteredDeclarations = syntaxTree.stylesheet.rules[0].declarations.filter((val, i, arr) => { return val.type === "declaration" });
169181
cssSelector.applyInlineSyle(view, filteredDeclarations);
170182
} catch (ex) {
171-
trace.write("Applying local style failed: " + ex, trace.categories.Style);
183+
trace.write("Applying local style failed: " + ex, trace.categories.Error, trace.messageType.error);
172184
}
173185
}

0 commit comments

Comments
 (0)