feat: apply styles when adding them to the application scope (#7652)

e2e/ui-tests-app/app/app.css

@@ -1,5 +1,5 @@
 #app {
-    background-color: lightblue;
+    background-color: lightyellow;
 }
 
 .ui-tests-app-issue-1639-red {
@@ -20,4 +20,4 @@
 .ui-tests-app-issue-1639-yellow {
     color: yellow;
     margin-left: 30;
-}
+}

e2e/ui-tests-app/app/button/main-page.ts

@@ -13,7 +13,6 @@ export function loadExamples() {
     const examples = new Map<string, string>();
     examples.set("btn-wrap-text-alignment-4266", "button/btn-wrap-text-alignment-4266-page");
     examples.set("button-border", "button/button-border-page");
-    examples.set("styles", "button/styles-page");
     examples.set("background", "button/background-page");
     examples.set("border-playground", "button/border-playground-page");
     examples.set("issue-4287", "button/issue-4287-page");

e2e/ui-tests-app/app/button/styles-page.ts

@@ -1,4 +0,0 @@
-export function onLoaded(args) {
-    var page = args.object;
-    page.addCss("#property { background-color: lightsalmon; }");
-}

e2e/ui-tests-app/app/css/main-page.ts

@@ -45,6 +45,7 @@ export function loadExamples() {
     examples.set("background-shorthand", "css/background-shorthand-page");
     examples.set("background-image-linear-gradient", "css/background-image-linear-gradient-page");
     examples.set("background-image", "css/background-image-page");
+    examples.set("styles", "css/styles-page");
 
     return examples;
 }

e2e/ui-tests-app/app/css/styles-page.ts

@@ -0,0 +1,10 @@
+import { addCss } from "tns-core-modules/application";
+
+export function onLoaded(args) {
+    var page = args.object;
+    page.addCss("#property { background-color: lightsalmon; }");
+}
+
+export function onTap() {
+    addCss("#app { background-color: lightblue; }");
+}

e2e/ui-tests-app/app/css/styles-page.xml

@@ -1,9 +1,9 @@
 <Page loaded="onLoaded">
   <WrapLayout>
-    <Button id="app" automationText="app" text="app" />
+    <Button id="app" automationText="app" text="app" tap="onTap" />
     <Button id="inline" automationText="inline" text="inline" style="background-color: lightgreen;" />
     <Button id="page" automationText="page" text="page" />
     <Button id="property" automationText="property" text="property" />
     <Button id="import" automationText="import" text="import" />
   </WrapLayout>
-</Page>
+</Page>

e2e/ui-tests-app/e2e/suites/css/styles/styles-page.ts

@@ -0,0 +1,21 @@
+import { AppiumDriver, logInfo } from "nativescript-dev-appium";
+
+import { PageObjectBaseModel } from "../../../page-object-base-model";
+
+export class StylesPage extends PageObjectBaseModel {
+
+    private readonly app = "app";
+
+    constructor(_driver: AppiumDriver) {
+        super(_driver, ["css", "styles"]);
+    }
+
+    async btnApp() {
+        return this._driver.waitForElement(this.app);
+    }
+
+    async tapAppBtn() {
+        await (await this.btnApp()).tap();
+        logInfo(`Tap on '${this.app}' button.`);
+    }
+}

e2e/ui-tests-app/e2e/suites/css/styles/styles.e2e-spec.ts

@@ -0,0 +1,41 @@
+import { assert } from "chai";
+import { AppiumDriver, createDriver, nsCapabilities } from "nativescript-dev-appium";
+
+import { setImageName } from "../../../helpers/image-helper";
+import { StylesPage } from "./styles-page";
+
+const suite = "css";
+const spec = "styles";
+
+describe(`${suite}-${spec}-suite`, () => {
+    let driver: AppiumDriver;
+    let stylesPage: StylesPage;
+
+    before(async function () {
+        nsCapabilities.testReporter.context = this;
+        driver = await createDriver();
+        await driver.restartApp();
+        stylesPage = new StylesPage(driver);
+        await stylesPage.initSuite();
+    });
+
+    after(async function () {
+        await stylesPage.endSuite();
+    });
+
+    beforeEach(async function () {
+        driver.imageHelper.testName = setImageName(suite, spec, this.currentTest.title);
+    });
+
+    afterEach(async function () {
+        if (this.currentTest.state === "failed") {
+            await driver.logTestArtifacts(this.currentTest.title);
+        }
+    });
+
+    it(`${suite}-${spec}-apply`, async function () {
+        await stylesPage.tapAppBtn();
+        await driver.imageHelper.compareScreen();
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+    });
+});

tns-core-modules/application/application-common.ts

@@ -117,10 +117,6 @@ export function loadAppCss(): void {
     }
 }
 
-export function addCss(cssText: string): void {
-    events.notify(<CssChangedEventData>{ eventName: "cssChanged", object: app, cssText: cssText });
-}
-
 global.__onUncaughtError = function (error: NativeScriptError) {
     events.notify(<UnhandledErrorEventData>{ eventName: uncaughtErrorEvent, object: app, android: error, ios: error, error: error });
 };

tns-core-modules/application/application.android.ts

@@ -1,7 +1,8 @@
 import {
     AndroidActivityBundleEventData, AndroidActivityEventData, ApplicationEventData, OrientationChangedEventData,
     AndroidApplication as AndroidApplicationDefinition, AndroidActivityNewIntentEventData,
-    AndroidActivityResultEventData, AndroidActivityBackPressedEventData, AndroidActivityRequestPermissionsEventData
+    AndroidActivityResultEventData, AndroidActivityBackPressedEventData, AndroidActivityRequestPermissionsEventData,
+    CssChangedEventData
 } from ".";
 
 import {
@@ -151,6 +152,14 @@ export function run(entry?: NavigationEntry | string) {
     _start(entry);
 }
 
+export function addCss(cssText: string): void {
+    notify(<CssChangedEventData>{ eventName: "cssChanged", object: androidApp, cssText: cssText });
+    const rootView = getRootView();
+    if (rootView) {
+        rootView._onCssStateChange();
+    }
+}
+
 const CALLBACKS = "_callbacks";
 
 export function _resetRootView(entry?: NavigationEntry | string) {

tns-core-modules/application/application.d.ts

@@ -168,6 +168,10 @@ export function getCssFileName(): string;
  */
 export function loadAppCss();
 
+/**
+* Adds new values to the application styles.
+* @param cssText - A valid styles which will be added to the current application styles.
+*/
 export function addCss(cssText: string): void;
 
 /**

tns-core-modules/application/application.ios.ts

@@ -1,9 +1,10 @@
 import {
     iOSApplication as IOSApplicationDefinition,
-    LaunchEventData,
     ApplicationEventData,
-    OrientationChangedEventData,
+    CssChangedEventData,
-    LoadAppCSSEventData
+    LaunchEventData,
+    LoadAppCSSEventData,
+    OrientationChangedEventData
 } from ".";
 
 import {
@@ -349,6 +350,14 @@ export function run(entry?: string | NavigationEntry) {
     _start(entry);
 }
 
+export function addCss(cssText: string): void {
+    notify(<CssChangedEventData>{ eventName: "cssChanged", object: <any>iosApp, cssText: cssText });
+    const rootView = getRootView();
+    if (rootView) {
+        rootView._onCssStateChange();
+    }
+}
+
 export function _resetRootView(entry?: NavigationEntry | string) {
     createRootFrame.value = false;
     mainEntry = typeof entry === "string" ? { moduleName: entry } : entry;