From 34e79c2d718d0d6568980a2d970f265056afd4a1 Mon Sep 17 00:00:00 2001 From: rigor789 Date: Sat, 17 Aug 2019 14:27:15 +0200 Subject: [PATCH 1/2] fix(CSS): correctly parse CSS selectors with escape sequences --- tests/app/ui/styling/style-tests.ts | 23 +++++++++++++++++++++++ tns-core-modules/css/parser.ts | 8 ++++---- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/tests/app/ui/styling/style-tests.ts b/tests/app/ui/styling/style-tests.ts index 6512d0f42f..112aecae51 100644 --- a/tests/app/ui/styling/style-tests.ts +++ b/tests/app/ui/styling/style-tests.ts @@ -197,6 +197,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..d248d462d9 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 +} From 31a1f6e93e70cba99e820699e39fc27d4b5e0513 Mon Sep 17 00:00:00 2001 From: rigor789 Date: Sat, 17 Aug 2019 14:30:30 +0200 Subject: [PATCH 2/2] style: fix linting error --- tns-core-modules/css/parser.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tns-core-modules/css/parser.ts b/tns-core-modules/css/parser.ts index d248d462d9..28d464209c 100644 --- a/tns-core-modules/css/parser.ts +++ b/tns-core-modules/css/parser.ts @@ -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].replace(/\\/g, ''); + const identifier: string = result[2].replace(/\\/g, ""); const value = { type, identifier }; return { start, end, value };