Skip to content

Commit edd0cbc

Browse files
darinddarind
committed
test: more css-tree compat tests
1 parent 879c106 commit edd0cbc

3 files changed

Lines changed: 108 additions & 25 deletions

File tree

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

Lines changed: 40 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,27 @@ function mapSelectors(selector: string): string[] {
1010
return selector.split(/\s*(?![^(]*\)),\s*/).map(s => s.replace(/\u200C/g, ","));
1111
}
1212

13-
function mapPosition(node) {
14-
return {
13+
function mapPosition(node, css) {
14+
let res: any = {
1515
start: {
1616
line: node.loc.start.line,
1717
column: node.loc.start.column
1818
},
1919
end: {
2020
line: node.loc.end.line,
2121
column: node.loc.end.column
22-
}
22+
},
23+
content: css
2324
};
25+
26+
if (node.loc.source && node.loc.source !== "<unknown>") {
27+
res.source = node.loc.source;
28+
}
29+
30+
return res;
2431
}
2532

26-
function transformAst(node) {
33+
function transformAst(node, css, type = null) {
2734
if (!node) {
2835
return;
2936
}
@@ -32,8 +39,7 @@ function transformAst(node) {
3239
return {
3340
type: "stylesheet",
3441
stylesheet: {
35-
source: node.loc.source,
36-
rules: node.children.toArray().map(child => transformAst(child)),
42+
rules: node.children.map(child => transformAst(child, css)).toArray(),
3743
parsingErrors: []
3844
}
3945
};
@@ -46,54 +52,67 @@ function transformAst(node) {
4652

4753
if (node.name === "supports" || node.name === "media") {
4854
atrule[node.name] = node.prelude.value;
49-
atrule.rules = transformAst(node.block);
55+
atrule.rules = transformAst(node.block, css);
5056
} else if (node.name === "page") {
5157
atrule.selectors = node.prelude ? mapSelectors(node.prelude.value) : [];
52-
atrule.declarations = transformAst(node.block);
58+
atrule.declarations = transformAst(node.block, css);
5359
} else if (node.name === "document") {
5460
atrule.document = node.prelude ? node.prelude.value : "";
5561
atrule.vendor = "";
56-
atrule.rules = transformAst(node.block);
62+
atrule.rules = transformAst(node.block, css);
5763
} else if (node.name === "font-face") {
58-
atrule.declarations = transformAst(node.block);
64+
atrule.declarations = transformAst(node.block, css);
5965
} else if (node.name === "import" || node.name === "charset" || node.name === "namespace") {
6066
atrule[node.name] = node.prelude ? node.prelude.value : "";
67+
} else if (node.name === "keyframes") {
68+
atrule.name = node.prelude ? node.prelude.value : "";
69+
atrule.keyframes = transformAst(node.block, css, "keyframe");
70+
atrule.vendor = undefined;
6171
} else {
62-
atrule.rules = transformAst(node.block);
72+
atrule.rules = transformAst(node.block, css);
6373
}
6474

75+
atrule.position = mapPosition(node, css);
76+
6577
return atrule;
6678
}
6779

6880
if (node.type === "Block") {
69-
return node.children.toArray().map(child => transformAst(child));
81+
return node.children.map(child => transformAst(child, css, type)).toArray();
7082
}
7183

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

75-
return {
76-
type: "rule",
77-
selectors: mapSelectors(value),
78-
declarations: transformAst(node.block),
79-
position: mapPosition(node)
87+
let res: any = {
88+
type: type != null ? type : "rule",
89+
declarations: transformAst(node.block, css),
90+
position: mapPosition(node, css)
8091
};
92+
93+
if (type === "keyframe") {
94+
res.values = mapSelectors(value);
95+
} else {
96+
res.selectors = mapSelectors(value);
97+
}
98+
99+
return res;
81100
}
82101

83102
if (node.type === "Comment") {
84103
return {
85104
type: "comment",
86105
comment: node.value,
87-
position: mapPosition(node)
106+
position: mapPosition(node, css)
88107
};
89108
}
90109

91110
if (node.type === "Declaration") {
92111
return {
93112
type: "declaration",
94113
property: node.property,
95-
value: node.value.value,
96-
position: mapPosition(node)
114+
value: node.value.value ? node.value.value.trim() : "",
115+
position: mapPosition(node, css)
97116
};
98117
}
99118

@@ -117,5 +136,5 @@ export function cssTreeParse(css, source): any {
117136
throw new Error(errors[0]);
118137
}
119138

120-
return transformAst(ast);
139+
return transformAst(ast, css);
121140
}

‎tests/app/ui/styling/style-tests.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1584,7 +1584,7 @@ export function test_nested_css_calc() {
15841584
stack.className = "wide";
15851585
TKUnit.assertEqual(stack.width as any, 125, "Stack - width === 125");
15861586

1587-
(stack as any).style = `width: calc(100% * calc(1 / 2)`;
1587+
(stack as any).style = `width: calc(100% * calc(1 / 2))`;
15881588

15891589
TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 0.5 }, "Stack - width === 50%");
15901590
}

‎unit-tests/css-tree-parser/css-tree-parser.ts‎

Lines changed: 67 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,78 @@ describe("css-tree parser compatible with rework ", () => {
88
const reworkAST = reworkCssParse(testCase, { source: "file.css" });
99
const cssTreeAST = cssTreeParse(testCase, "file.css");
1010

11-
assert.deepEqual(reworkAST, cssTreeAST);
11+
assert.deepEqual(cssTreeAST, reworkAST);
1212
});
1313

1414
it("@keyframes", () => {
15-
const testCase = ".test { animation-name: test; } @keyframes test { from { background-color: red; } to { background-color: blue; } }";
15+
const testCase = ".test { animation-name: test; } @keyframes test { from { background-color: red; } to { background-color: blue; } } .test { color: red; }";
1616
const reworkAST = reworkCssParse(testCase, { source: "file.css" });
1717
const cssTreeAST = cssTreeParse(testCase, "file.css");
1818

19-
assert.deepEqual(reworkAST, cssTreeAST);
19+
assert.deepEqual(cssTreeAST, reworkAST);
20+
});
21+
22+
it("@media", () => {
23+
const testCase = "@media screen and (max-width: 600px) { body { background-color: olive; } } .test { color: red; }";
24+
const reworkAST = reworkCssParse(testCase, { source: "file.css" });
25+
const cssTreeAST = cssTreeParse(testCase, "file.css");
26+
27+
assert.deepEqual(cssTreeAST, reworkAST);
28+
});
29+
30+
it("@supports", () => {
31+
const testCase = "@supports not (display: grid) { div { float: right; } } .test { color: red; }";
32+
const reworkAST = reworkCssParse(testCase, { source: "file.css" });
33+
const cssTreeAST = cssTreeParse(testCase, "file.css");
34+
35+
assert.deepEqual(cssTreeAST, reworkAST);
36+
});
37+
38+
it("@page", () => {
39+
const testCase = "@page :first { margin: 2cm; } .test { color: red; }";
40+
const reworkAST = reworkCssParse(testCase, { source: "file.css" });
41+
const cssTreeAST = cssTreeParse(testCase, "file.css");
42+
43+
assert.deepEqual(cssTreeAST, reworkAST);
44+
});
45+
46+
it("@document", () => {
47+
const testCase = "@document url(\"https://www.example.com/\") { h1 { color: green; } } .test { color: red; }";
48+
const reworkAST = reworkCssParse(testCase, { source: "file.css" });
49+
const cssTreeAST = cssTreeParse(testCase, "file.css");
50+
51+
assert.deepEqual(cssTreeAST, reworkAST);
52+
});
53+
54+
it("@font-face", () => {
55+
const testCase = "@font-face { font-family: \"Open Sans\"; src: url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"), url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\"); } .test { color: red; }";
56+
const reworkAST = reworkCssParse(testCase, { source: "file.css" });
57+
const cssTreeAST = cssTreeParse(testCase, "file.css");
58+
59+
assert.deepEqual(cssTreeAST, reworkAST);
60+
});
61+
62+
it("@import", () => {
63+
const testCase = "@import url('landscape.css') screen and (orientation:landscape); @import url(\"fineprint.css\") print; .test { color: red; }";
64+
const reworkAST = reworkCssParse(testCase, { source: "file.css" });
65+
const cssTreeAST = cssTreeParse(testCase, "file.css");
66+
67+
assert.deepEqual(cssTreeAST, reworkAST);
68+
});
69+
70+
it("@charset", () => {
71+
const testCase = "@charset \"utf-8\"; .test { color: red; }";
72+
const reworkAST = reworkCssParse(testCase, { source: "file.css" });
73+
const cssTreeAST = cssTreeParse(testCase, "file.css");
74+
75+
assert.deepEqual(cssTreeAST, reworkAST);
76+
});
77+
78+
it("@namespace", () => {
79+
const testCase = "@namespace svg url(http://www.w3.org/2000/svg); .test { color: red; }";
80+
const reworkAST = reworkCssParse(testCase, { source: "file.css" });
81+
const cssTreeAST = cssTreeParse(testCase, "file.css");
82+
83+
assert.deepEqual(cssTreeAST, reworkAST);
2084
});
2185
});

0 commit comments

Comments
 (0)