feat(css): add attribute scoped css without global refresh (#7907)

joshcomley · MartoYankov · commit f791a403cd5f · 2019-10-08T15:35:39.000+03:00
diff --git a/tns-core-modules/application/application.android.ts b/tns-core-modules/application/application.android.ts
@@ -195,11 +195,13 @@ export function run(entry?: NavigationEntry | string) {
     _start(entry);
 }
 
-export function addCss(cssText: string): void {
+export function addCss(cssText: string, attributeScoped?: boolean): void {
     notify(<CssChangedEventData>{ eventName: "cssChanged", object: androidApp, cssText: cssText });
-    const rootView = getRootView();
-    if (rootView) {
-        rootView._onCssStateChange();
+    if (!attributeScoped) {
+        const rootView = getRootView();
+        if (rootView) {
+            rootView._onCssStateChange();
+        }
     }
 }
 
diff --git a/tns-core-modules/application/application.d.ts b/tns-core-modules/application/application.d.ts
@@ -181,8 +181,9 @@ export function loadAppCss();
 /**
 * Adds new values to the application styles.
 * @param cssText - A valid styles which will be added to the current application styles.
+* @param attributeScoped - Whether the styles are attribute scoped. Adding attribute scoped styles will not perform a full application styling refresh.
 */
-export function addCss(cssText: string): void;
+export function addCss(cssText: string, attributeScoped?: boolean): void;
 
 /**
  * This event is raised when application css is changed.
diff --git a/tns-core-modules/application/application.ios.ts b/tns-core-modules/application/application.ios.ts
@@ -419,11 +419,13 @@ export function run(entry?: string | NavigationEntry) {
     _start(entry);
 }
 
-export function addCss(cssText: string): void {
+export function addCss(cssText: string, attributeScoped?: boolean): void {
     notify(<CssChangedEventData>{ eventName: "cssChanged", object: <any>iosApp, cssText: cssText });
-    const rootView = getRootView();
-    if (rootView) {
-        rootView._onCssStateChange();
+    if (!attributeScoped) {
+        const rootView = getRootView();
+        if (rootView) {
+            rootView._onCssStateChange();
+        }
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -195,11 +195,13 @@ export function run(entry?: NavigationEntry \| string) {`
`195`	`195`	`_start(entry);`
`196`	`196`	`}`
`197`	`197`
`198`		`-export function addCss(cssText: string): void {`
	`198`	`+export function addCss(cssText: string, attributeScoped?: boolean): void {`
`199`	`199`	`notify(<CssChangedEventData>{ eventName: "cssChanged", object: androidApp, cssText: cssText });`
`200`		`- const rootView = getRootView();`
`201`		`- if (rootView) {`
`202`		`- rootView._onCssStateChange();`
	`200`	`+ if (!attributeScoped) {`
	`201`	`+ const rootView = getRootView();`
	`202`	`+ if (rootView) {`
	`203`	`+ rootView._onCssStateChange();`
	`204`	`+ }`
`203`	`205`	`}`
`204`	`206`	`}`
`205`	`207`
Original file line number	Diff line number	Diff line change
`@@ -419,11 +419,13 @@ export function run(entry?: string \| NavigationEntry) {`
`419`	`419`	`_start(entry);`
`420`	`420`	`}`
`421`	`421`
`422`		`-export function addCss(cssText: string): void {`
	`422`	`+export function addCss(cssText: string, attributeScoped?: boolean): void {`
`423`	`423`	`notify(<CssChangedEventData>{ eventName: "cssChanged", object: <any>iosApp, cssText: cssText });`
`424`		`- const rootView = getRootView();`
`425`		`- if (rootView) {`
`426`		`- rootView._onCssStateChange();`
	`424`	`+ if (!attributeScoped) {`
	`425`	`+ const rootView = getRootView();`
	`426`	`+ if (rootView) {`
	`427`	`+ rootView._onCssStateChange();`
	`428`	`+ }`
`427`	`429`	`}`
`428`	`430`	`}`
`429`	`431`