javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 03:31:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(css): parse css selectors with escape sequences (for real) (#8496)

Browse Source 
* fix(css): CSS escape sequences

* Missing semicolon

Co-authored-by: Vasil Trifonov <v.trifonov@gmail.com>
This commit is contained in:
Timothy Johnson
2020-04-03 09:43:52 -07:00
committed by GitHub
parent da80cd5e1a
commit 50eb372929
2 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
nativescript-core/css/parser.ts
View File

@ -804,10 +804,16 @@ export function parseUniversalSelector(text: string, start: number = 0): Parsed<
return { start, end, value: { type: "*" } };
}
const simpleIdentifierSelectorRegEx = /(#|\.|:|\b)([_-\w][_-\w\d\\/]*)/gy;
const simpleIdentifierSelectorRegEx = /(#|\.|:|\b)((?:[\w_-]|\\.)(?:[\w\d_-]|\\.)*)/gyu;
const unicodeEscapeRegEx = /\\([0-9a-fA-F]{1,5}\s|[0-9a-fA-F]{6})/g;
export function parseSimpleIdentifierSelector(text: string, start: number = 0): Parsed<TypeSelector | ClassSelector | IdSelector | PseudoClassSelector> {
simpleIdentifierSelectorRegEx.lastIndex = start;
const result = simpleIdentifierSelectorRegEx.exec(text);
const result = simpleIdentifierSelectorRegEx.exec(
text.replace(
unicodeEscapeRegEx,
(_, c) => "\\" + String.fromCodePoint(parseInt(c.trim(), 16))
)
);
if (!result) {
return null;
}

37
tests/app/ui/styling/style-tests.ts
View File

@ -200,25 +200,32 @@ export function test_class_selector() {
export function test_class_selector_with_escape_characters() {
let page = helper.getClearCurrentPage();
let btnWithClass1: buttonModule.Button;
let btnWithClass2: buttonModule.Button;
page.css = ".test-1 { color: red; } .test-1\\/2 { color: blue }";
//// Will be styled
btnWithClass1 = new buttonModule.Button();
btnWithClass1.className = "test-1";
btnWithClass2 = new buttonModule.Button();
btnWithClass2.className = "test-1/2";
page.css = `
.test-1 { color: red; }
.test-1\\/2, .test-1\\:2, .\\61 f, .\\1F642 { color: blue }
`;
const stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btnWithClass1);
stack.addChild(btnWithClass2);
helper.assertViewColor(btnWithClass1, "#FF0000");
helper.assertViewColor(btnWithClass2, "#0000FF");
let btn: buttonModule.Button = new buttonModule.Button();
stack.addChild(btn);
//// Will be styled
btn.className = "test-1";
helper.assertViewColor(btn, "#FF0000");
btn.className = "test-1/2";
helper.assertViewColor(btn, "#0000FF");
btn.className = "test-1:2";
helper.assertViewColor(btn, "#0000FF");
btn.className = "af";
helper.assertViewColor(btn, "#0000FF");
btn.className = "\u{1F642}";
helper.assertViewColor(btn, "#0000FF");
}
export function test_multiple_class_selector() {