diff --git a/tests/app/ui/styling/style-tests.ts b/tests/app/ui/styling/style-tests.ts index db4c180c4a..d3c5cfa3d6 100644 --- 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 index 5fa7a99198..28d464209c 100644 --- a/tns-core-modules/css/parser.ts +++ b/tns-core-modules/css/parser.ts @@ -546,7 +546,7 @@ function parseArgumentsList(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 { 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 = { type, identifier }; return { start, end, value }; @@ -1617,4 +1617,4 @@ export class CSSNativeScript { return selectors; } -} \ No newline at end of file +}