more fixes & tests added

apps/tests/ui/style/style-tests.ts

@@ -778,6 +778,17 @@ export var test_CSS_isAppliedOnPage_From_Import = function () {
     });
 }
 
+export var test_CSS_isAppliedOnPage_From_addCssFile = function () {
+    var testButton = new buttonModule.Button();
+    testButton.text = "Test";
+
+    helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
+        var page: pageModule.Page = <pageModule.Page> views[1];
+        page.addCssFile("~/ui/style/test.css");
+        helper.assertViewBackgroundColor(page, "#FF0000");
+    });
+}
+
 // <snippet module="ui/styling" title="styling">
 // For information and example how to use style properties please refer to special [**Styling**](../../../styling.md) topic. 
 // </snippet>

apps/tests/xml-declaration/xml-declaration-tests.ts

@@ -50,6 +50,31 @@ export function test_loadWithOptionsNoXML() {
     TKUnit.assert(v instanceof view.View, "Expected result: View; Actual result: " + v + ";");
 };
 
+export function test_loadWithOptionsNoXML_CSSIsApplied() {
+    var newPage: page.Page;
+    var pageFactory = function (): page.Page {
+        newPage = new page.Page();
+
+        newPage.content = builder.load({
+            path: "~/xml-declaration/mymodule",
+            name: "MyControl",
+            exports: exports,
+            page: newPage
+        });
+
+        return newPage;
+    };
+
+    helper.navigate(pageFactory);
+    TKUnit.assert(newPage.isLoaded, "The page should be loaded here.");
+    try {
+        helper.assertViewBackgroundColor(newPage.content, "#FF0000");
+    }
+    finally {
+        helper.goBack();
+    }
+};
+
 export function test_loadWithOptionsWithXML() {
     var v = builder.load({
         path: "~/xml-declaration/mymodulewithxml",
@@ -59,6 +84,31 @@ export function test_loadWithOptionsWithXML() {
     TKUnit.assert(v instanceof view.View, "Expected result: View; Actual result: " + v + ";");
 };
 
+export function test_loadWithOptionsWithXML_CSSIsApplied() {
+    var newPage: page.Page;
+    var pageFactory = function (): page.Page {
+        newPage = new page.Page();
+
+        newPage.content = builder.load({
+            path: "~/xml-declaration/mymodulewithxml",
+            name: "MyControl",
+            exports: exports,
+            page: newPage
+        });
+
+        return newPage;
+    };
+
+    helper.navigate(pageFactory);
+    TKUnit.assert(newPage.isLoaded, "The page should be loaded here.");
+    try {
+        helper.assertViewBackgroundColor(newPage.content, "#008000");
+    }
+    finally {
+        helper.goBack();
+    }
+};
+
 export function test_loadWithOptionsFromTNS() {
     var v = builder.load({
         path: "ui/label",

ui/builder/builder.d.ts

@@ -1,6 +1,7 @@
 //@private
 declare module "ui/builder" {
     import view = require("ui/core/view");
+    import page = require("ui/page");
 
     export function load(fileName: string, exports?: any): view.View;
     export function load(options: LoadOptions): view.View;
@@ -10,5 +11,6 @@ declare module "ui/builder" {
         path: string;
         name: string;
         exports?: any;
+        page?: page.Page;
     }
 }

ui/builder/builder.ts

@@ -7,7 +7,6 @@ import componentBuilder = require("ui/builder/component-builder");
 import templateBuilderDef = require("ui/builder/template-builder");
 import platform = require("platform");
 import definition = require("ui/builder");
-import frame = require("ui/frame");
 import page = require("ui/page");
 
 var KNOWNCOLLECTIONS = "knownCollections";
@@ -217,19 +216,8 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr
 
     // Add component CSS file if exists.
     var cssFileName = fileName.replace(".xml", ".css");
-    if (fs.File.exists(cssFileName)) {
+    if (fs.File.exists(cssFileName) && parentPage) {
-        var currentPage = parentPage;
+        parentPage.addCssFile(cssFileName);
-
-        if (!currentPage) {
-            var topMostFrame = frame.topmost();
-            if (topMostFrame && topMostFrame.currentPage) {
-                currentPage = topMostFrame.currentPage;
-            }
-        }
-
-        if (currentPage) {
-            currentPage.addCssFile(cssFileName);
-        }
     }
 
     return result;
@@ -242,7 +230,7 @@ export function load(arg: any): view.View {
     if (arguments.length === 1) {
         if (!types.isString(arguments[0])) {
             var options = <definition.LoadOptions>arguments[0];
-            componentModule = loadCustomComponent(options.path, options.name, undefined, options.exports);
+            componentModule = loadCustomComponent(options.path, options.name, undefined, options.exports, options.page);
         } else {
             componentModule = loadInternal(<string>arguments[0]);
         }

ui/page/page-common.ts

@@ -117,8 +117,8 @@ export class Page extends contentView.ContentView implements dts.Page, view.AddA
 
     private _cssFiles = {};
     public addCssFile(cssFileName: string) {
-        if (cssFileName.indexOf(fs.knownFolders.currentApp().path) !== 0) {
+        if (cssFileName.indexOf("~/") === 0) {
-            cssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFileName);
+            cssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFileName.replace("~/", ""));
         }
         if (!this._cssFiles[cssFileName]) {
             if (fs.File.exists(cssFileName)) {

ui/styling/style-scope.ts

@@ -33,18 +33,17 @@ export class StyleScope {
     }
 
     public addCss(cssString: string, cssFileName: string): void {
-        if (this._css === undefined) {
+        this._css = this._css ? this._css + cssString : cssString;
-            this._css = cssString;
+        this._cssFileName = cssFileName
-        }
+
-        else {
-            this._css += cssString;
-        }
-        this._cssFileName = cssFileName;
         this._reset();
-        if (this._cssSelectors) {
+
-            var addedSelectors = StyleScope.createSelectorsFromCss(cssString, cssFileName);
+        if (!this._cssSelectors) {
-            this._cssSelectors = StyleScope._joinCssSelectorsArrays([this._cssSelectors, addedSelectors]);
+            this._cssSelectors = new Array<cssSelector.CssSelector>();
         }
+
+        var selectorsFromFile = StyleScope.createSelectorsFromCss(cssString, cssFileName);
+        this._cssSelectors = StyleScope._joinCssSelectorsArrays([this._cssSelectors, selectorsFromFile]);
     }
 
     public static createSelectorsFromCss(css: string, cssFileName: string): cssSelector.CssSelector[] {