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

* fix(css): CSS escape sequences * Missing semicolon Co-authored-by: Vasil Trifonov <v.trifonov@gmail.com>
NativeScript · Apr 3, 2020 · 50eb372 · 50eb372
1 parent da80cd5
commit 50eb372
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 15 deletions.
diff --git a/nativescript-core/css/parser.ts b/nativescript-core/css/parser.ts
@@ -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;
     }

diff --git a/tests/app/ui/styling/style-tests.ts b/tests/app/ui/styling/style-tests.ts
@@ -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, .test-1\\:2, .\\61 f, .\\1F642 { color: blue }
+    `;
 
-    page.css = ".test-1 { color: red; } .test-1\\/2 { color: blue }";
+    const stack = new stackModule.StackLayout();
+    page.content = stack;
+
+    let btn: buttonModule.Button = new buttonModule.Button();
+    stack.addChild(btn);
 
     //// Will be styled
-    btnWithClass1 = new buttonModule.Button();
-    btnWithClass1.className = "test-1";
+    btn.className = "test-1";
+    helper.assertViewColor(btn, "#FF0000");
 
-    btnWithClass2 = new buttonModule.Button();
-    btnWithClass2.className = "test-1/2";
+    btn.className = "test-1/2";
+    helper.assertViewColor(btn, "#0000FF");
 
-    const stack = new stackModule.StackLayout();
-    page.content = stack;
-    stack.addChild(btnWithClass1);
-    stack.addChild(btnWithClass2);
+    btn.className = "test-1:2";
+    helper.assertViewColor(btn, "#0000FF");
 
-    helper.assertViewColor(btnWithClass1, "#FF0000");
-    helper.assertViewColor(btnWithClass2, "#0000FF");
+    btn.className = "af";
+    helper.assertViewColor(btn, "#0000FF");
+
+    btn.className = "\u{1F642}";
+    helper.assertViewColor(btn, "#0000FF");
 }
 
 export function test_multiple_class_selector() {