NativeScript
diff --git a/tests/app/ui/styling/style-tests.ts b/tests/app/ui/styling/style-tests.ts
@@ -674,6 +674,23 @@ export function test_CSS_isAppliedOnPage_From_addCssFile() {
     });
 }
 
+export function test_CSS_isAppliedOnPage_From_changeCssFile() {
+    const testButton = new buttonModule.Button();
+    testButton.text = "Test";
+
+    const testCss = "button { color: blue; }";
+
+    const testFunc = function (views: Array<viewModule.View>) {
+        helper.assertViewColor(testButton, "#0000FF");
+        const page: pageModule.Page = <pageModule.Page>views[1];
+        page.changeCssFile("~/ui/styling/test.css");
+        helper.assertViewBackgroundColor(page, "#FF0000");
+        TKUnit.assert(testButton.style.color === undefined, "Color should not have a value");
+    }
+
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
+}
+
 const invalidCSS = ".invalid { " +
     "color: invalidValue; " +
     "background-color: invalidValue; " +

diff --git a/tns-core-modules/application/application-common.ts b/tns-core-modules/application/application-common.ts
@@ -82,19 +82,23 @@ export function setApplication(instance: iOSApplication | AndroidApplication): v
 export function livesync(rootView: View, context?: ModuleContext) {
     events.notify(<EventData>{ eventName: "livesync", object: app });
     const liveSyncCore = global.__onLiveSyncCore;
-    let reapplyAppCss = false;
+    let reapplyAppStyles = false;
+    let reapplyLocalStyles = false;
 
-    if (context) {
-        const fullFileName = getCssFileName();
-        const fileName = fullFileName.substring(0, fullFileName.lastIndexOf(".") + 1);
+    if (context && context.path) {
         const extensions = ["css", "scss"];
-        reapplyAppCss = extensions.some(ext => context.path === fileName.concat(ext));
+        const appStylesFullFileName = getCssFileName();
+        const appStylesFileName = appStylesFullFileName.substring(0, appStylesFullFileName.lastIndexOf(".") + 1);
+        reapplyAppStyles = extensions.some(ext => context.path === appStylesFileName.concat(ext));
+        if (!reapplyAppStyles) {
+            reapplyLocalStyles = extensions.some(ext => context.path.endsWith(ext));
+        }
     }
 
-    if (reapplyAppCss && rootView) {
+    if (reapplyAppStyles && rootView) {
         rootView._onCssStateChange();
     } else if (liveSyncCore) {
-        liveSyncCore();
+        reapplyLocalStyles ? liveSyncCore(context) : liveSyncCore();
     }
 }
 

diff --git a/tns-core-modules/application/application.ios.ts b/tns-core-modules/application/application.ios.ts
@@ -225,9 +225,9 @@ class IOSApplication implements IOSApplicationDefinition {
         }
     }
 
-    public _onLivesync(): void {
+    public _onLivesync(context?: ModuleContext): void {
         // If view can't handle livesync set window controller.
-        if (this._rootView && !this._rootView._onLivesync()) {
+        if (this._rootView && !this._rootView._onLivesync(context)) {
             this.setWindowContent();
         }
     }
@@ -264,8 +264,8 @@ exports.ios = iosApp;
 setApplication(iosApp);
 
 // attach on global, so it can be overwritten in NativeScript Angular
-(<any>global).__onLiveSyncCore = function () {
-    iosApp._onLivesync();
+(<any>global).__onLiveSyncCore = function (context?: ModuleContext) {
+    iosApp._onLivesync(context);
 }
 
 let mainEntry: NavigationEntry;

diff --git a/tns-core-modules/module.d.ts b/tns-core-modules/module.d.ts
@@ -52,7 +52,7 @@ declare namespace NodeJS {
         __inspector?: any;
         __extends: any;
         __onLiveSync: (context?: { type: string, path: string }) => void;
-        __onLiveSyncCore: () => void;
+        __onLiveSyncCore: (context?: { type: string, path: string }) => void;
         __onUncaughtError: (error: NativeScriptError) => void;
         __onDiscardedError: (error: NativeScriptError) => void;
         TNS_WEBPACK?: boolean;

diff --git a/tns-core-modules/ui/core/view/view-common.ts b/tns-core-modules/ui/core/view/view-common.ts
@@ -105,6 +105,14 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         this._updateStyleScope(cssFileName);
     }
 
+    public changeCssFile(cssFileName: string): void {
+        const scope = this._styleScope;
+        if (scope && cssFileName) {
+            scope.changeCssFile(cssFileName);
+            this._onCssStateChange();
+        }
+    }
+
     public _updateStyleScope(cssFileName?: string, cssString?: string, css?: string): void {
         let scope = this._styleScope;
         if (!scope) {

diff --git a/tns-core-modules/ui/core/view/view.d.ts b/tns-core-modules/ui/core/view/view.d.ts
@@ -18,14 +18,14 @@ export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator;
 /**
  * Specifies the type name for the instances of this View class,
  * that is used when matching CSS type selectors.
- * 
+ *
  * Usage:
  * ```
  * @CSSType("Button")
  * class Button extends View {
  * }
  * ```
- * 
+ *
  * Internally the decorator set `Button.prototype.cssType = "Button"`.
  * @param type The type name, e. g. "Button", "Label", etc.
  */
@@ -50,8 +50,8 @@ export type px = number;
 export type percent = number;
 
 /**
- * The Point interface describes a two dimensional location. 
- * It has two properties x and y, representing the x and y coordinate of the location. 
+ * The Point interface describes a two dimensional location.
+ * It has two properties x and y, representing the x and y coordinate of the location.
  */
 export interface Point {
     /**
@@ -66,8 +66,8 @@ export interface Point {
 }
 
 /**
- * The Size interface describes abstract dimensions in two dimensional space. 
- * It has two properties width and height, representing the width and height values of the size. 
+ * The Size interface describes abstract dimensions in two dimensional space.
+ * It has two properties width and height, representing the width and height values of the size.
  */
 export interface Size {
     /**
@@ -99,8 +99,8 @@ export interface ShownModallyData extends EventData {
 }
 
 /**
- * This class is the base class for all UI components. 
- * A View occupies a rectangular area on the screen and is responsible for drawing and layouting of all UI components within. 
+ * This class is the base class for all UI components.
+ * A View occupies a rectangular area on the screen and is responsible for drawing and layouting of all UI components within.
  */
 export abstract class View extends ViewBase {
     /**
@@ -475,13 +475,13 @@ export abstract class View extends ViewBase {
      * [Deprecated. Please use the on() instead.] Adds a gesture observer.
      * @param type - Type of the gesture.
      * @param callback - A function that will be executed when gesture is received.
-     * @param thisArg - An optional parameter which will be used as `this` context for callback execution. 
+     * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
      */
     observe(type: GestureTypes, callback: (args: GestureEventData) => void, thisArg?: any);
 
     /**
      * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
-     * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change") or you can use gesture types. 
+     * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change") or you can use gesture types.
      * @param callback - Callback function which will be executed when event is raised.
      * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
      */
@@ -527,12 +527,12 @@ export abstract class View extends ViewBase {
     modal: View;
 
     /**
-     * Animates one or more properties of the view based on the supplied options. 
+     * Animates one or more properties of the view based on the supplied options.
      */
     public animate(options: AnimationDefinition): AnimationPromise;
 
     /**
-     * Creates an Animation object based on the supplied options. 
+     * Creates an Animation object based on the supplied options.
      */
     public createAnimation(options: AnimationDefinition): Animation;
 
@@ -562,7 +562,7 @@ export abstract class View extends ViewBase {
     public getActualSize(): Size;
 
     /**
-     * Derived classes can override this method to handle Android back button press. 
+     * Derived classes can override this method to handle Android back button press.
      */
     onBackPressed(): boolean;
 
@@ -575,7 +575,7 @@ export abstract class View extends ViewBase {
     /**
      * @private
      * Adds a new values to current css.
-     * @param cssString - A valid css which will be added to current css. 
+     * @param cssString - A valid css which will be added to current css.
      */
     addCss(cssString: string): void;
 
@@ -586,13 +586,20 @@ export abstract class View extends ViewBase {
      */
     addCssFile(cssFileName: string): void;
 
+    /**
+     * @private
+     * Changes the current css to the content of the file.
+     * @param cssFileName - A valid file name (from the application root) which contains a valid css.
+     */
+    changeCssFile(cssFileName: string): void;
+
     // Lifecycle events
     _getNativeViewsCount(): number;
 
     _eachLayoutView(callback: (View) => void): void;
-    
+
     /**
-     * Iterates over children of type View. 
+     * Iterates over children of type View.
      * @param callback Called for each child of type View. Iteration stops if this method returns falsy value.
      */
     public eachChildView(callback: (view: View) => boolean): void;
@@ -673,17 +680,17 @@ export abstract class View extends ViewBase {
     /**
      * @private
      */
-    _onLivesync(): boolean;
+    _onLivesync(context?: { type: string, path: string }): boolean;
     /**
      * @private
      */
     _getFragmentManager(): any; /* android.support.v4.app.FragmentManager */
 
     /**
      * Updates styleScope or create new styleScope.
-     * @param cssFileName 
-     * @param cssString 
-     * @param css 
+     * @param cssFileName
+     * @param cssString
+     * @param css
      */
     _updateStyleScope(cssFileName?: string, cssString?: string, css?: string): void;
 
@@ -715,7 +722,7 @@ export abstract class View extends ViewBase {
 }
 
 /**
- * Base class for all UI components that are containers. 
+ * Base class for all UI components that are containers.
  */
 export class ContainerView extends View {
     /**
@@ -725,7 +732,7 @@ export class ContainerView extends View {
 }
 
 /**
- * Base class for all UI components that implement custom layouts. 
+ * Base class for all UI components that implement custom layouts.
  */
 export class CustomLayoutView extends ContainerView {
     //@private

diff --git a/tns-core-modules/ui/frame/frame-common.ts b/tns-core-modules/ui/frame/frame-common.ts
@@ -76,7 +76,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
                     if (backstackIndex !== -1) {
                         backstack = backstackIndex;
                     } else {
-                        // NOTE: We don't search for entries in navigationQueue because there is no way for 
+                        // NOTE: We don't search for entries in navigationQueue because there is no way for
                         // developer to get reference to BackstackEntry unless transition is completed.
                         // At that point the entry is put in the backstack array.
                         // If we start to return Backstack entry from navigate method then
@@ -153,7 +153,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
     //     }
 
     //     let currentPage = this._currentEntry.resolvedPage;
-    //     let currentNavigationEntry = this._currentEntry.entry; 
+    //     let currentNavigationEntry = this._currentEntry.entry;
     //     if (currentPage["isBiOrientational"] && currentNavigationEntry.moduleName) {
     //         if (this.canGoBack()){
     //             this.goBack();
@@ -162,7 +162,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
     //             currentNavigationEntry.backstackVisible = false;
     //         }
     //         // Re-navigate to the same page so the other (.port or .land) xml is loaded.
-    //         this.navigate(currentNavigationEntry);                   
+    //         this.navigate(currentNavigationEntry);
     //     }
     // }
 
@@ -224,7 +224,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
         newPage.onNavigatedTo(isBack);
 
         // Reset executing entry after NavigatedTo is raised;
-        // we do not want to execute two navigations in parallel in case 
+        // we do not want to execute two navigations in parallel in case
         // additional navigation is triggered from the NavigatedTo handler.
         this._executingEntry = null;
     }
@@ -259,7 +259,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
                 return true;
             }
         }
-    
+
         return false;
     }
 
@@ -563,14 +563,25 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
         return result;
     }
 
-    public _onLivesync(): boolean {
+    public _onLivesync(context?: ModuleContext): boolean {
         super._onLivesync();
 
         if (!this._currentEntry || !this._currentEntry.entry) {
             return false;
         }
 
         const currentEntry = this._currentEntry.entry;
+        if (context && context.path) {
+            // Use topmost instead of this to cover nested frames scenario
+            const topmostFrame = topmost();
+            const moduleName = topmostFrame.currentEntry.moduleName;
+            const reapplyStyles = context.path.includes(moduleName);
+            if (reapplyStyles && moduleName) {
+                topmostFrame.currentPage.changeCssFile(context.path);
+                return true;
+            }
+        }
+
         const newEntry: NavigationEntry = {
             animated: false,
             clearHistory: true,