Support for adding scoped CSS without triggering global refresh (#1999)

joshcomley · MartoYankov · elena-p · commit 662c1221e910 · 2019-10-14T17:01:09.000+03:00
* Scoped styles should not trigger a global refresh (for bug: NativeScript/theme#179) * Update nativescript-angular/renderer.ts Fixed profiling naming inconsistencies Co-Authored-By: Martin Yankov <m.i.yankov@gmail.com> * Update nativescript-angular/renderer.ts Naming consistency fix Co-Authored-By: Martin Yankov <m.i.yankov@gmail.com>
diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts
@@ -356,7 +356,7 @@ class EmulatedRenderer extends NativeScriptRenderer {
     private addStyles(styles: (string | any[])[], componentId: string) {
         styles.map(s => s.toString())
             .map(s => replaceNgAttribute(s, componentId))
-            .forEach(addStyleToCss);
+            .forEach(addScopedStyleToCss);
     }
 }
 
@@ -365,6 +365,11 @@ const addStyleToCss = profile('"renderer".addStyleToCss', function addStyleToCss
     addCss(style);
 });
 
+// tslint:disable-next-line
+const addScopedStyleToCss = profile('"renderer".addScopedStyleToCss', function addScopedStyleToCss(style: string): void {
+    addCss(style, true);
+});
+
 function replaceNgAttribute(input: string, componentId: string): string {
     return input.replace(COMPONENT_REGEX, componentId);
 }

Original file line number	Diff line number	Diff line change
`@@ -356,7 +356,7 @@ class EmulatedRenderer extends NativeScriptRenderer {`
`356`	`356`	`private addStyles(styles: (string \| any[])[], componentId: string) {`
`357`	`357`	`styles.map(s => s.toString())`
`358`	`358`	`.map(s => replaceNgAttribute(s, componentId))`
`359`		`- .forEach(addStyleToCss);`
	`359`	`+ .forEach(addScopedStyleToCss);`
`360`	`360`	`}`
`361`	`361`	`}`
`362`	`362`
`@@ -365,6 +365,11 @@ const addStyleToCss = profile('"renderer".addStyleToCss', function addStyleToCss`
`365`	`365`	`addCss(style);`
`366`	`366`	`});`
`367`	`367`
	`368`	`+// tslint:disable-next-line`
	`369`	`+const addScopedStyleToCss = profile('"renderer".addScopedStyleToCss', function addScopedStyleToCss(style: string): void {`
	`370`	`+ addCss(style, true);`
	`371`	`+});`
	`372`	`+`
`368`	`373`	`function replaceNgAttribute(input: string, componentId: string): string {`
`369`	`374`	`return input.replace(COMPONENT_REGEX, componentId);`
`370`	`375`	`}`