Allow updates to application CSS rules.

Expose an `application.addCss` method and hide `application.cssSelectors`
from end-user typings. Update StyleScope's with new application selectors
on style application.

NOT updating existing controls/views unless reloaded, or forced (via a
change to className, etc).

application/application-common.ts

@@ -6,6 +6,8 @@ import cssSelector = require("ui/styling/css-selector");
 import * as fileSystemModule from "file-system";
 import * as styleScopeModule from "ui/styling/style-scope";
 
+var styleScope: typeof styleScopeModule = undefined;
+
 var events = new observable.Observable();
 global.moduleMerge(events, exports);
 
@@ -22,7 +24,10 @@ export var mainEntry: frame.NavigationEntry;
 
 export var cssFile: string = "app.css"
 
-export var cssSelectorsCache: Array<cssSelector.CssSelector> = undefined;
+export var appSelectors: Array<cssSelector.CssSelector> = [];
+export var additionalSelectors: Array<cssSelector.CssSelector> = [];
+export var cssSelectors: Array<cssSelector.CssSelector> = [];
+export var cssSelectorVersion: number = 0;
 
 export var resources: any = {};
 
@@ -50,16 +55,32 @@ export function loadCss(cssFile?: string): Array<cssSelector.CssSelector> {
     var result: Array<cssSelector.CssSelector>;
 
     var fs: typeof fileSystemModule = require("file-system");
-    var styleScope: typeof styleScopeModule = require("ui/styling/style-scope");
+    if (!styleScope) {
+        styleScope = require("ui/styling/style-scope");
+    }
 
     var cssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFile);
     if (fs.File.exists(cssFileName)) {
         var file = fs.File.fromPath(cssFileName);
         var applicationCss = file.readTextSync();
         if (applicationCss) {
-            result = styleScope.StyleScope.createSelectorsFromCss(applicationCss, cssFileName);
+            result = parseCss(applicationCss, cssFileName);
         }
     }
 
     return result;
-}
+}
+
+export function mergeCssSelectors(module: any): void {
+    //HACK: pass the merged module and work with its exported vars.
+    module.cssSelectors = module.appSelectors.slice();
+    module.cssSelectors.push.apply(module.cssSelectors, module.additionalSelectors);
+    module.cssSelectorVersion++;
+}
+
+export function parseCss(cssText: string, cssFileName?: string): Array<cssSelector.CssSelector> {
+    if (!styleScope) {
+        styleScope = require("ui/styling/style-scope");
+    }
+    return styleScope.StyleScope.createSelectorsFromCss(cssText, cssFileName);
+}

application/application.android.ts

@@ -322,7 +322,20 @@ function onConfigurationChanged(context: android.content.Context, intent: androi
 }
 
 function loadCss() {
-    typedExports.cssSelectorsCache = typedExports.loadCss(typedExports.cssFile);
+    //HACK: identical to application.ios.ts
+    typedExports.appSelectors = typedExports.loadCss(typedExports.cssFile) || [];
+    if (typedExports.appSelectors.length > 0) {
+        typedExports.mergeCssSelectors(typedExports);
+    }
+}
+
+export function addCss(cssText: string) {
+    //HACK: identical to application.ios.ts
+    const parsed = typedExports.parseCss(cssText);
+    if (parsed) {
+        typedExports.additionalSelectors.push.apply(typedExports.additionalSelectors, parsed);
+        typedExports.mergeCssSelectors(typedExports);
+    }
 }
 
 global.__onLiveSync = function () {
@@ -351,4 +364,4 @@ global.__onUncaughtError = function (error: definition.NativeScriptError) {
     }
 
     typedExports.notify({ eventName: typedExports.uncaughtErrorEvent, object: appModule.android, android: error });
-}
+}

application/application.d.ts

@@ -122,10 +122,19 @@ declare module "application" {
      */
     export var cssFile: string;
 
+    //@private
+    export var appSelectors: Array<cssSelector.CssSelector>;
+    export var additionalSelectors: Array<cssSelector.CssSelector>;
     /**
      * Cached css selectors created from the content of the css file.
      */
-    export var cssSelectorsCache: Array<cssSelector.CssSelector>;
+    export var cssSelectors: Array<cssSelector.CssSelector>;
+    export var cssSelectorVersion: number;
+    export function parseCss(cssText: string, cssFileName?: string): Array<cssSelector.CssSelector>;
+    export function mergeCssSelectors(module: any): void;
+    //@endprivate
+
+    export function addCss(cssText: string): void;
 
     /**
      * Loads css file and parses to a css syntax tree.

application/application.ios.ts

@@ -242,7 +242,20 @@ global.__onUncaughtError = function (error: definition.NativeScriptError) {
 }
 
 function loadCss() {
-    typedExports.cssSelectorsCache = typedExports.loadCss(typedExports.cssFile);
+    //HACK: identical to application.ios.ts
+    typedExports.appSelectors = typedExports.loadCss(typedExports.cssFile) || [];
+    if (typedExports.appSelectors.length > 0) {
+        typedExports.mergeCssSelectors(typedExports);
+    }
+}
+
+export function addCss(cssText: string) {
+    //HACK: identical to application.android.ts
+    const parsed = typedExports.parseCss(cssText);
+    if (parsed) {
+        typedExports.additionalSelectors.push.apply(typedExports.additionalSelectors, parsed);
+        typedExports.mergeCssSelectors(typedExports);
+    }
 }
 
 var started: boolean = false;