fix(css): parse css selectors with escape sequences (#7689)

rigor789 · manoldonev · commit 552021373e5d · 2019-08-26T13:59:03.000+03:00
diff --git a/tests/app/ui/styling/style-tests.ts b/tests/app/ui/styling/style-tests.ts
@@ -198,6 +198,29 @@ export function test_class_selector() {
     TKUnit.assert(btnWithNoClass.style.color === undefined, "Color should not have a value");
 }
 
+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";
+
+    const stack = new stackModule.StackLayout();
+    page.content = stack;
+    stack.addChild(btnWithClass1);
+    stack.addChild(btnWithClass2);
+
+    helper.assertViewColor(btnWithClass1, "#FF0000");
+    helper.assertViewColor(btnWithClass2, "#0000FF");
+}
+
 export function test_multiple_class_selector() {
     let page = helper.getClearCurrentPage();
     let btnWithClasses: buttonModule.Button;
diff --git a/tns-core-modules/css/parser.ts b/tns-core-modules/css/parser.ts
@@ -546,7 +546,7 @@ function parseArgumentsList<T>(text: string, start: number, argument: (value: st
         }
         end = arg.end;
         value.push(arg);
-        
+
         closingBracketOrCommaRegEx.lastIndex = end;
         const closingBracketOrComma = closingBracketOrCommaRegEx.exec(text);
         if (closingBracketOrComma) {
@@ -734,7 +734,7 @@ 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\\/]*)/gy;
 export function parseSimpleIdentifierSelector(text: string, start: number = 0): Parsed<TypeSelector | ClassSelector | IdSelector | PseudoClassSelector> {
     simpleIdentifierSelectorRegEx.lastIndex = start;
     const result = simpleIdentifierSelectorRegEx.exec(text);
@@ -743,7 +743,7 @@ export function parseSimpleIdentifierSelector(text: string, start: number = 0):
     }
     const end = simpleIdentifierSelectorRegEx.lastIndex;
     const type = <"#" | "." | ":" | "">result[1];
-    const identifier: string = result[2];
+    const identifier: string = result[2].replace(/\\/g, "");
     const value = <TypeSelector | ClassSelector | IdSelector | PseudoClassSelector>{ type, identifier };
 
     return { start, end, value };
@@ -1617,4 +1617,4 @@ export class CSSNativeScript {
 
         return selectors;
     }
-}
+}
