From f478c619d88ebe612744261bdc759776cf53d1c2 Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@telerik.com>
Date: Wed, 8 Jul 2015 11:28:13 +0300
Subject: [PATCH 1/9] support for custom components CSS added

---
 CrossPlatformModules.csproj                   |  6 ++--
 .../xml-declaration/mymodule/MyControl.css    |  3 ++
 .../xml-declaration/mymodule/MyControl.ts     |  2 ++
 .../mymodulewithxml/MyControl.css             |  3 ++
 .../mymodulewithxml/MyControl.xml             |  2 +-
 ui/builder/builder.ts                         | 28 +++++++++++++++++--
 ui/page/page-common.ts                        | 15 ++++++----
 7 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 apps/tests/xml-declaration/mymodule/MyControl.css
 create mode 100644 apps/tests/xml-declaration/mymodulewithxml/MyControl.css

diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 1e8e0aeef..5378cc00e 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -211,7 +211,7 @@
     <TypeScriptCompile Include="apps\ui-tests-app\bindings\xmlbasics.ts">
       <DependentUpon>xmlbasics.xml</DependentUpon>
     </TypeScriptCompile>
-	<TypeScriptCompile Include="apps\ui-tests-app\bindings\basics.ts" />
+    <TypeScriptCompile Include="apps\ui-tests-app\bindings\basics.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\layouts\absolute.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\layouts\dock.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\layouts\grid.ts" />
@@ -706,6 +706,8 @@
     <Content Include="apps\tests\xml-declaration\mymodulewithxml\my-control-no-js.xml">
       <SubType>Designer</SubType>
     </Content>
+    <Content Include="apps\tests\xml-declaration\mymodulewithxml\MyControl.css" />
+    <Content Include="apps\tests\xml-declaration\mymodule\MyControl.css" />
     <Content Include="apps\ui-tests-app\bindings\xmlbasics.xml" />
     <Content Include="apps\ui-tests-app\layouts\absolute.xml" />
     <Content Include="apps\ui-tests-app\layouts\dock.xml" />
@@ -1674,7 +1676,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>
\ No newline at end of file
diff --git a/apps/tests/xml-declaration/mymodule/MyControl.css b/apps/tests/xml-declaration/mymodule/MyControl.css
new file mode 100644
index 000000000..d701672c7
--- /dev/null
+++ b/apps/tests/xml-declaration/mymodule/MyControl.css
@@ -0,0 +1,3 @@
+.MyStackLayout {
+    background-color: red;
+}
diff --git a/apps/tests/xml-declaration/mymodule/MyControl.ts b/apps/tests/xml-declaration/mymodule/MyControl.ts
index 53ba3b697..aca0396d3 100644
--- a/apps/tests/xml-declaration/mymodule/MyControl.ts
+++ b/apps/tests/xml-declaration/mymodule/MyControl.ts
@@ -18,5 +18,7 @@ export class MyControl extends stackLayoutModule.StackLayout {
 
         this.addChild(lbl);
         this.addChild(btn);
+
+        this.cssClass = "MyStackLayout";
     }
 }
\ No newline at end of file
diff --git a/apps/tests/xml-declaration/mymodulewithxml/MyControl.css b/apps/tests/xml-declaration/mymodulewithxml/MyControl.css
new file mode 100644
index 000000000..dd3ccf653
--- /dev/null
+++ b/apps/tests/xml-declaration/mymodulewithxml/MyControl.css
@@ -0,0 +1,3 @@
+.MySecondCustomStackLayout {
+    background-color: green;
+}
diff --git a/apps/tests/xml-declaration/mymodulewithxml/MyControl.xml b/apps/tests/xml-declaration/mymodulewithxml/MyControl.xml
index 016a2736c..4fe8e30f7 100644
--- a/apps/tests/xml-declaration/mymodulewithxml/MyControl.xml
+++ b/apps/tests/xml-declaration/mymodulewithxml/MyControl.xml
@@ -1,4 +1,4 @@
-<StackLayout xmlns:customControls="xml-declaration/mymodule">
+<StackLayout xmlns:customControls="xml-declaration/mymodule" cssClass="MySecondCustomStackLayout">
   <Label id="Label1" text="mymodulewithxml" />
   <Button text="Click!" tap="buttonTap2" /> 
 </StackLayout>
diff --git a/ui/builder/builder.ts b/ui/builder/builder.ts
index 1942552e7..9cbb64f36 100644
--- a/ui/builder/builder.ts
+++ b/ui/builder/builder.ts
@@ -7,6 +7,8 @@ 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";
 
@@ -36,6 +38,7 @@ export function parse(value: string, context: any): view.View {
 }
 
 function parseInternal(value: string, context: any): componentBuilder.ComponentModule {
+    var currentPage: page.Page;
     var rootComponentModule: componentBuilder.ComponentModule;
     // Temporary collection used for parent scope.
     var parents = new Array<componentBuilder.ComponentModule>();
@@ -115,7 +118,7 @@ function parseInternal(value: string, context: any): componentBuilder.ComponentM
 
                 if (args.prefix && args.namespace) {
                     // Custom components
-                    componentModule = loadCustomComponent(args.namespace, args.elementName, args.attributes, context);
+                    componentModule = loadCustomComponent(args.namespace, args.elementName, args.attributes, context, currentPage);
                 } else {
                     // Default components
                     componentModule = componentBuilder.getComponentModule(args.elementName, args.namespace, args.attributes, context);
@@ -138,6 +141,10 @@ function parseInternal(value: string, context: any): componentBuilder.ComponentM
                     } else if (parents.length === 0) {
                         // Set root component.
                         rootComponentModule = componentModule;
+
+                        if (rootComponentModule && rootComponentModule.component instanceof page.Page) {
+                            currentPage = <page.Page>rootComponentModule.component;
+                        }
                     }
 
                     // Add the component instance to the parents scope collection.
@@ -175,7 +182,7 @@ function parseInternal(value: string, context: any): componentBuilder.ComponentM
     return rootComponentModule;
 }
 
-function loadCustomComponent(componentPath: string, componentName?: string, attributes?: Object, context?: Object): componentBuilder.ComponentModule {
+function loadCustomComponent(componentPath: string, componentName?: string, attributes?: Object, context?: Object, parentPage?: page.Page): componentBuilder.ComponentModule {
     var result: componentBuilder.ComponentModule;
     componentPath = componentPath.replace("~/", "");
 
@@ -208,6 +215,23 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr
         result = componentBuilder.getComponentModule(componentName, componentPath, attributes, context);
     }
 
+    // Add component CSS file if exists.
+    var cssFileName = fileName.replace(".xml", ".css");
+    if (fs.File.exists(cssFileName)) {
+        var currentPage = parentPage;
+
+        if (!currentPage) {
+            var topMostFrame = frame.topmost();
+            if (topMostFrame && topMostFrame.currentPage) {
+                currentPage = topMostFrame.currentPage;
+            }
+        }
+
+        if (currentPage) {
+            currentPage.addCssFile(cssFileName);
+        }
+    }
+
     return result;
 }
 
diff --git a/ui/page/page-common.ts b/ui/page/page-common.ts
index e056dc8a4..185ad529d 100644
--- a/ui/page/page-common.ts
+++ b/ui/page/page-common.ts
@@ -20,7 +20,7 @@ var navigationBarHiddenProperty = new dependencyObservable.Property(
     );
 
 function onNavigationBarHiddenPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    console.log("onNavigationBarHiddenPropertyChanged("+data.newValue+")");
+    console.log("onNavigationBarHiddenPropertyChanged(" + data.newValue + ")");
     var page = <Page>data.object;
     if (page.isLoaded) {
         page._updateNavigationBar(data.newValue);
@@ -116,15 +116,18 @@ export class Page extends contentView.ContentView implements dts.Page, view.AddA
         this._refreshCss();
     }
 
+    private _cssFiles = {};
     public addCssFile(cssFileName: string) {
         if (cssFileName.indexOf(fs.knownFolders.currentApp().path) !== 0) {
             cssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFileName);
         }
-
-        var cssString;
-        if (fs.File.exists(cssFileName)) {
-            new fileSystemAccess.FileSystemAccess().readText(cssFileName, r => { cssString = r; });
-            this._addCssInternal(cssString, cssFileName);
+        if (!this._cssFiles[cssFileName]) {
+            if (fs.File.exists(cssFileName)) {
+                new fileSystemAccess.FileSystemAccess().readText(cssFileName, r => {
+                    this._addCssInternal(r, cssFileName);
+                    this._cssFiles[cssFileName] = true;
+                });
+            }
         }
     }
 

From 85e15e6af048e28109f3adcb8c802dd51c9ee757 Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@telerik.com>
Date: Wed, 8 Jul 2015 15:41:02 +0300
Subject: [PATCH 2/9] ui-test added

---
 CrossPlatformModules.csproj                   | 16 +++++++++++++
 .../custom-components/mymodule/MyControl.css  |  3 +++
 .../custom-components/mymodule/MyControl.ts   | 24 +++++++++++++++++++
 .../custom-components/mymodule/package.json   |  2 ++
 .../mymodulewithxml/MyControl.css             |  3 +++
 .../mymodulewithxml/MyControl.ts              | 16 +++++++++++++
 .../mymodulewithxml/MyControl.xml             |  4 ++++
 .../mymodulewithxml/package.json              |  2 ++
 apps/ui-tests-app/custom-components/page.xml  |  7 ++++++
 apps/ui-tests-app/mainPage.ts                 |  2 +-
 10 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 apps/ui-tests-app/custom-components/mymodule/MyControl.css
 create mode 100644 apps/ui-tests-app/custom-components/mymodule/MyControl.ts
 create mode 100644 apps/ui-tests-app/custom-components/mymodule/package.json
 create mode 100644 apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.css
 create mode 100644 apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.ts
 create mode 100644 apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.xml
 create mode 100644 apps/ui-tests-app/custom-components/mymodulewithxml/package.json
 create mode 100644 apps/ui-tests-app/custom-components/page.xml

diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 5378cc00e..3daeec9e5 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -212,6 +212,10 @@
       <DependentUpon>xmlbasics.xml</DependentUpon>
     </TypeScriptCompile>
     <TypeScriptCompile Include="apps\ui-tests-app\bindings\basics.ts" />
+    <TypeScriptCompile Include="apps\ui-tests-app\custom-components\mymodulewithxml\MyControl.ts">
+      <DependentUpon>MyControl.xml</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\ui-tests-app\custom-components\mymodule\MyControl.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\layouts\absolute.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\layouts\dock.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\layouts\grid.ts" />
@@ -709,6 +713,12 @@
     <Content Include="apps\tests\xml-declaration\mymodulewithxml\MyControl.css" />
     <Content Include="apps\tests\xml-declaration\mymodule\MyControl.css" />
     <Content Include="apps\ui-tests-app\bindings\xmlbasics.xml" />
+    <Content Include="apps\ui-tests-app\custom-components\mymodulewithxml\MyControl.css" />
+    <Content Include="apps\ui-tests-app\custom-components\mymodulewithxml\MyControl.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\custom-components\mymodule\MyControl.css" />
+    <Content Include="apps\ui-tests-app\custom-components\page.xml" />
     <Content Include="apps\ui-tests-app\layouts\absolute.xml" />
     <Content Include="apps\ui-tests-app\layouts\dock.xml" />
     <Content Include="apps\ui-tests-app\layouts\grid.xml" />
@@ -1591,6 +1601,12 @@
     <Content Include="apps\cuteness.unoptimized\package.json">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="apps\ui-tests-app\custom-components\mymodule\package.json">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="apps\ui-tests-app\custom-components\mymodulewithxml\package.json">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <None Include="js-libs\esprima\LICENSE.BSD" />
     <Content Include="source-control.md" />
     <Content Include="ui\segmented-bar\package.json">
diff --git a/apps/ui-tests-app/custom-components/mymodule/MyControl.css b/apps/ui-tests-app/custom-components/mymodule/MyControl.css
new file mode 100644
index 000000000..d701672c7
--- /dev/null
+++ b/apps/ui-tests-app/custom-components/mymodule/MyControl.css
@@ -0,0 +1,3 @@
+.MyStackLayout {
+    background-color: red;
+}
diff --git a/apps/ui-tests-app/custom-components/mymodule/MyControl.ts b/apps/ui-tests-app/custom-components/mymodule/MyControl.ts
new file mode 100644
index 000000000..aca0396d3
--- /dev/null
+++ b/apps/ui-tests-app/custom-components/mymodule/MyControl.ts
@@ -0,0 +1,24 @@
+import observable = require("data/observable");
+import stackLayoutModule = require("ui/layouts/stack-layout");
+import label = require("ui/label");
+import button = require("ui/button");
+
+export class MyControl extends stackLayoutModule.StackLayout {
+    constructor() {
+        super();
+
+        var counter: number = 0;
+
+        var lbl = new label.Label();
+        var btn = new button.Button();
+        btn.text = "Tap me!";
+        btn.on(button.Button.tapEvent, (args: observable.EventData) => {
+            lbl.text = "Tap " + counter++;
+        });
+
+        this.addChild(lbl);
+        this.addChild(btn);
+
+        this.cssClass = "MyStackLayout";
+    }
+}
\ No newline at end of file
diff --git a/apps/ui-tests-app/custom-components/mymodule/package.json b/apps/ui-tests-app/custom-components/mymodule/package.json
new file mode 100644
index 000000000..55267b5f2
--- /dev/null
+++ b/apps/ui-tests-app/custom-components/mymodule/package.json
@@ -0,0 +1,2 @@
+{ "name" : "MyControl",
+  "main" : "MyControl.js" }
\ No newline at end of file
diff --git a/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.css b/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.css
new file mode 100644
index 000000000..dd3ccf653
--- /dev/null
+++ b/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.css
@@ -0,0 +1,3 @@
+.MySecondCustomStackLayout {
+    background-color: green;
+}
diff --git a/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.ts b/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.ts
new file mode 100644
index 000000000..532f0f6c5
--- /dev/null
+++ b/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.ts
@@ -0,0 +1,16 @@
+import observable = require("data/observable");
+import view = require("ui/core/view");
+import label = require("ui/label");
+
+var count = 0;
+export function buttonTap2(args: observable.EventData) {
+    count++;
+
+    var parent = (<view.View>args.object).parent;
+    if (parent) {
+        var lbl = parent.getViewById<label.Label>("Label1");
+        if (lbl) {
+            lbl.text = "You clicked " + count + " times!";
+        }
+    }
+}
\ No newline at end of file
diff --git a/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.xml b/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.xml
new file mode 100644
index 000000000..4fe8e30f7
--- /dev/null
+++ b/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.xml
@@ -0,0 +1,4 @@
+<StackLayout xmlns:customControls="xml-declaration/mymodule" cssClass="MySecondCustomStackLayout">
+  <Label id="Label1" text="mymodulewithxml" />
+  <Button text="Click!" tap="buttonTap2" /> 
+</StackLayout>
diff --git a/apps/ui-tests-app/custom-components/mymodulewithxml/package.json b/apps/ui-tests-app/custom-components/mymodulewithxml/package.json
new file mode 100644
index 000000000..55267b5f2
--- /dev/null
+++ b/apps/ui-tests-app/custom-components/mymodulewithxml/package.json
@@ -0,0 +1,2 @@
+{ "name" : "MyControl",
+  "main" : "MyControl.js" }
\ No newline at end of file
diff --git a/apps/ui-tests-app/custom-components/page.xml b/apps/ui-tests-app/custom-components/page.xml
new file mode 100644
index 000000000..26559db84
--- /dev/null
+++ b/apps/ui-tests-app/custom-components/page.xml
@@ -0,0 +1,7 @@
+<Page xmlns:customControls="custom-components/mymodule"
+      xmlns:customControls2="custom-components/mymodulewithxml">
+  <StackLayout>
+    <customControls:MyControl />
+    <customControls2:MyControl />
+  </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/ui-tests-app/mainPage.ts b/apps/ui-tests-app/mainPage.ts
index 4b05362b8..b0101b462 100644
--- a/apps/ui-tests-app/mainPage.ts
+++ b/apps/ui-tests-app/mainPage.ts
@@ -10,7 +10,7 @@ import trace = require("trace");
 trace.enable();
 trace.setCategories(trace.categories.Test);
 
-var list: string[] = ["pages", "layouts", "modal-view", "bindings"];
+var list: string[] = ["pages", "layouts", "modal-view", "bindings", "custom-components"];
 
 // basePath is auto-changed when building multiple apps
 var basePath = "";

From 378a78084a4e7264735f00907e2b36c682855259 Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@telerik.com>
Date: Wed, 8 Jul 2015 15:47:41 +0300
Subject: [PATCH 3/9] console.log removed

---
 ui/page/page-common.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/page/page-common.ts b/ui/page/page-common.ts
index 185ad529d..1514ed5bf 100644
--- a/ui/page/page-common.ts
+++ b/ui/page/page-common.ts
@@ -20,7 +20,6 @@ var navigationBarHiddenProperty = new dependencyObservable.Property(
     );
 
 function onNavigationBarHiddenPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    console.log("onNavigationBarHiddenPropertyChanged(" + data.newValue + ")");
     var page = <Page>data.object;
     if (page.isLoaded) {
         page._updateNavigationBar(data.newValue);

From d1ec70286d5d1b604696fb6733f96b6f6c98a60e Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@telerik.com>
Date: Wed, 8 Jul 2015 18:16:28 +0300
Subject: [PATCH 4/9] more fixes & tests added

---
 apps/tests/ui/style/style-tests.ts            | 11 ++++
 .../xml-declaration/xml-declaration-tests.ts  | 50 +++++++++++++++++++
 ui/builder/builder.d.ts                       |  2 +
 ui/builder/builder.ts                         | 18 ++-----
 ui/page/page-common.ts                        |  4 +-
 ui/styling/style-scope.ts                     | 19 ++++---
 6 files changed, 77 insertions(+), 27 deletions(-)

diff --git a/apps/tests/ui/style/style-tests.ts b/apps/tests/ui/style/style-tests.ts
index 66a35a762..9bc6ba6a9 100644
--- a/apps/tests/ui/style/style-tests.ts
+++ b/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>
diff --git a/apps/tests/xml-declaration/xml-declaration-tests.ts b/apps/tests/xml-declaration/xml-declaration-tests.ts
index 5fbc4de33..8d9f20354 100644
--- a/apps/tests/xml-declaration/xml-declaration-tests.ts
+++ b/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",
diff --git a/ui/builder/builder.d.ts b/ui/builder/builder.d.ts
index 9834658f5..9328be659 100644
--- a/ui/builder/builder.d.ts
+++ b/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;
     }
 }
diff --git a/ui/builder/builder.ts b/ui/builder/builder.ts
index 9cbb64f36..d73df82f5 100644
--- a/ui/builder/builder.ts
+++ b/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)) {
-        var currentPage = parentPage;
-
-        if (!currentPage) {
-            var topMostFrame = frame.topmost();
-            if (topMostFrame && topMostFrame.currentPage) {
-                currentPage = topMostFrame.currentPage;
-            }
-        }
-
-        if (currentPage) {
-            currentPage.addCssFile(cssFileName);
-        }
+    if (fs.File.exists(cssFileName) && parentPage) {
+        parentPage.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]);
         }
diff --git a/ui/page/page-common.ts b/ui/page/page-common.ts
index 1514ed5bf..486ff033e 100644
--- a/ui/page/page-common.ts
+++ b/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) {
-            cssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFileName);
+        if (cssFileName.indexOf("~/") === 0) {
+            cssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFileName.replace("~/", ""));
         }
         if (!this._cssFiles[cssFileName]) {
             if (fs.File.exists(cssFileName)) {
diff --git a/ui/styling/style-scope.ts b/ui/styling/style-scope.ts
index 05c69cb96..3015b6d45 100644
--- a/ui/styling/style-scope.ts
+++ b/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 = cssString;
-        }
-        else {
-            this._css += cssString;
-        }
-        this._cssFileName = cssFileName;
+        this._css = this._css ? this._css + cssString : cssString;
+        this._cssFileName = cssFileName
+
         this._reset();
-        if (this._cssSelectors) {
-            var addedSelectors = StyleScope.createSelectorsFromCss(cssString, cssFileName);
-            this._cssSelectors = StyleScope._joinCssSelectorsArrays([this._cssSelectors, addedSelectors]);
+
+        if (!this._cssSelectors) {
+            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[] {

From 810d29bd499fbc4d618ebd45fcdaf5c611a1455b Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@telerik.com>
Date: Thu, 9 Jul 2015 09:19:20 +0300
Subject: [PATCH 5/9] custom component test removed from ui test app

---
 CrossPlatformModules.csproj                   | 18 +-------------
 .../custom-components/mymodule/MyControl.css  |  3 ---
 .../custom-components/mymodule/MyControl.ts   | 24 -------------------
 .../custom-components/mymodule/package.json   |  2 --
 .../mymodulewithxml/MyControl.css             |  3 ---
 .../mymodulewithxml/MyControl.ts              | 16 -------------
 .../mymodulewithxml/MyControl.xml             |  4 ----
 .../mymodulewithxml/package.json              |  2 --
 apps/ui-tests-app/custom-components/page.xml  |  7 ------
 9 files changed, 1 insertion(+), 78 deletions(-)
 delete mode 100644 apps/ui-tests-app/custom-components/mymodule/MyControl.css
 delete mode 100644 apps/ui-tests-app/custom-components/mymodule/MyControl.ts
 delete mode 100644 apps/ui-tests-app/custom-components/mymodule/package.json
 delete mode 100644 apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.css
 delete mode 100644 apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.ts
 delete mode 100644 apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.xml
 delete mode 100644 apps/ui-tests-app/custom-components/mymodulewithxml/package.json
 delete mode 100644 apps/ui-tests-app/custom-components/page.xml

diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 3daeec9e5..a44d0d1e4 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -212,10 +212,6 @@
       <DependentUpon>xmlbasics.xml</DependentUpon>
     </TypeScriptCompile>
     <TypeScriptCompile Include="apps\ui-tests-app\bindings\basics.ts" />
-    <TypeScriptCompile Include="apps\ui-tests-app\custom-components\mymodulewithxml\MyControl.ts">
-      <DependentUpon>MyControl.xml</DependentUpon>
-    </TypeScriptCompile>
-    <TypeScriptCompile Include="apps\ui-tests-app\custom-components\mymodule\MyControl.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\layouts\absolute.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\layouts\dock.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\layouts\grid.ts" />
@@ -713,12 +709,6 @@
     <Content Include="apps\tests\xml-declaration\mymodulewithxml\MyControl.css" />
     <Content Include="apps\tests\xml-declaration\mymodule\MyControl.css" />
     <Content Include="apps\ui-tests-app\bindings\xmlbasics.xml" />
-    <Content Include="apps\ui-tests-app\custom-components\mymodulewithxml\MyControl.css" />
-    <Content Include="apps\ui-tests-app\custom-components\mymodulewithxml\MyControl.xml">
-      <SubType>Designer</SubType>
-    </Content>
-    <Content Include="apps\ui-tests-app\custom-components\mymodule\MyControl.css" />
-    <Content Include="apps\ui-tests-app\custom-components\page.xml" />
     <Content Include="apps\ui-tests-app\layouts\absolute.xml" />
     <Content Include="apps\ui-tests-app\layouts\dock.xml" />
     <Content Include="apps\ui-tests-app\layouts\grid.xml" />
@@ -1601,12 +1591,6 @@
     <Content Include="apps\cuteness.unoptimized\package.json">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
-    <Content Include="apps\ui-tests-app\custom-components\mymodule\package.json">
-      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
-    </Content>
-    <Content Include="apps\ui-tests-app\custom-components\mymodulewithxml\package.json">
-      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
-    </Content>
     <None Include="js-libs\esprima\LICENSE.BSD" />
     <Content Include="source-control.md" />
     <Content Include="ui\segmented-bar\package.json">
@@ -1692,7 +1676,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>
\ No newline at end of file
diff --git a/apps/ui-tests-app/custom-components/mymodule/MyControl.css b/apps/ui-tests-app/custom-components/mymodule/MyControl.css
deleted file mode 100644
index d701672c7..000000000
--- a/apps/ui-tests-app/custom-components/mymodule/MyControl.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.MyStackLayout {
-    background-color: red;
-}
diff --git a/apps/ui-tests-app/custom-components/mymodule/MyControl.ts b/apps/ui-tests-app/custom-components/mymodule/MyControl.ts
deleted file mode 100644
index aca0396d3..000000000
--- a/apps/ui-tests-app/custom-components/mymodule/MyControl.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import observable = require("data/observable");
-import stackLayoutModule = require("ui/layouts/stack-layout");
-import label = require("ui/label");
-import button = require("ui/button");
-
-export class MyControl extends stackLayoutModule.StackLayout {
-    constructor() {
-        super();
-
-        var counter: number = 0;
-
-        var lbl = new label.Label();
-        var btn = new button.Button();
-        btn.text = "Tap me!";
-        btn.on(button.Button.tapEvent, (args: observable.EventData) => {
-            lbl.text = "Tap " + counter++;
-        });
-
-        this.addChild(lbl);
-        this.addChild(btn);
-
-        this.cssClass = "MyStackLayout";
-    }
-}
\ No newline at end of file
diff --git a/apps/ui-tests-app/custom-components/mymodule/package.json b/apps/ui-tests-app/custom-components/mymodule/package.json
deleted file mode 100644
index 55267b5f2..000000000
--- a/apps/ui-tests-app/custom-components/mymodule/package.json
+++ /dev/null
@@ -1,2 +0,0 @@
-{ "name" : "MyControl",
-  "main" : "MyControl.js" }
\ No newline at end of file
diff --git a/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.css b/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.css
deleted file mode 100644
index dd3ccf653..000000000
--- a/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.MySecondCustomStackLayout {
-    background-color: green;
-}
diff --git a/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.ts b/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.ts
deleted file mode 100644
index 532f0f6c5..000000000
--- a/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import observable = require("data/observable");
-import view = require("ui/core/view");
-import label = require("ui/label");
-
-var count = 0;
-export function buttonTap2(args: observable.EventData) {
-    count++;
-
-    var parent = (<view.View>args.object).parent;
-    if (parent) {
-        var lbl = parent.getViewById<label.Label>("Label1");
-        if (lbl) {
-            lbl.text = "You clicked " + count + " times!";
-        }
-    }
-}
\ No newline at end of file
diff --git a/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.xml b/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.xml
deleted file mode 100644
index 4fe8e30f7..000000000
--- a/apps/ui-tests-app/custom-components/mymodulewithxml/MyControl.xml
+++ /dev/null
@@ -1,4 +0,0 @@
-<StackLayout xmlns:customControls="xml-declaration/mymodule" cssClass="MySecondCustomStackLayout">
-  <Label id="Label1" text="mymodulewithxml" />
-  <Button text="Click!" tap="buttonTap2" /> 
-</StackLayout>
diff --git a/apps/ui-tests-app/custom-components/mymodulewithxml/package.json b/apps/ui-tests-app/custom-components/mymodulewithxml/package.json
deleted file mode 100644
index 55267b5f2..000000000
--- a/apps/ui-tests-app/custom-components/mymodulewithxml/package.json
+++ /dev/null
@@ -1,2 +0,0 @@
-{ "name" : "MyControl",
-  "main" : "MyControl.js" }
\ No newline at end of file
diff --git a/apps/ui-tests-app/custom-components/page.xml b/apps/ui-tests-app/custom-components/page.xml
deleted file mode 100644
index 26559db84..000000000
--- a/apps/ui-tests-app/custom-components/page.xml
+++ /dev/null
@@ -1,7 +0,0 @@
-<Page xmlns:customControls="custom-components/mymodule"
-      xmlns:customControls2="custom-components/mymodulewithxml">
-  <StackLayout>
-    <customControls:MyControl />
-    <customControls2:MyControl />
-  </StackLayout>
-</Page>
\ No newline at end of file

From d9fd3b7259aa553e007e11a4560532419ff37416 Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@telerik.com>
Date: Thu, 9 Jul 2015 09:20:45 +0300
Subject: [PATCH 6/9] list with pages fixed

---
 apps/ui-tests-app/mainPage.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui-tests-app/mainPage.ts b/apps/ui-tests-app/mainPage.ts
index b0101b462..4b05362b8 100644
--- a/apps/ui-tests-app/mainPage.ts
+++ b/apps/ui-tests-app/mainPage.ts
@@ -10,7 +10,7 @@ import trace = require("trace");
 trace.enable();
 trace.setCategories(trace.categories.Test);
 
-var list: string[] = ["pages", "layouts", "modal-view", "bindings", "custom-components"];
+var list: string[] = ["pages", "layouts", "modal-view", "bindings"];
 
 // basePath is auto-changed when building multiple apps
 var basePath = "";

From 7aae543bd7256545c9efc13e2d2d42606716ef6f Mon Sep 17 00:00:00 2001
From: Hristo Deshev <hristo@deshev.com>
Date: Thu, 9 Jul 2015 11:22:59 +0300
Subject: [PATCH 7/9] Strong types for builder.load parameters. Hopefully
 better intellisense.

---
 ui/builder/builder.ts | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/ui/builder/builder.ts b/ui/builder/builder.ts
index d73df82f5..5b6458c05 100644
--- a/ui/builder/builder.ts
+++ b/ui/builder/builder.ts
@@ -223,19 +223,21 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr
     return result;
 }
 
-export function load(arg: any): view.View {
+export function load(pathOrOptions: string | definition.LoadOptions, context?: any): view.View {
     var viewToReturn: view.View;
     var componentModule: componentBuilder.ComponentModule;
 
-    if (arguments.length === 1) {
-        if (!types.isString(arguments[0])) {
-            var options = <definition.LoadOptions>arguments[0];
+    if (!context) {
+        if (!types.isString(pathOrOptions)) {
+            var options = <definition.LoadOptions>pathOrOptions;
             componentModule = loadCustomComponent(options.path, options.name, undefined, options.exports, options.page);
         } else {
-            componentModule = loadInternal(<string>arguments[0]);
+            var path = <string>pathOrOptions;
+            componentModule = loadInternal(path);
         }
     } else {
-        componentModule = loadInternal(<string>arguments[0], arguments[1]);
+        var path = <string>pathOrOptions;
+        componentModule = loadInternal(path, context);
     }
 
     if (componentModule) {
@@ -315,4 +317,4 @@ function getExports(instance: view.View): any {
     }
 
     return parent ? (<any>parent).exports : undefined;
-}
\ No newline at end of file
+}

From 56444fb9275855640b958b92e963684191eb526f Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@telerik.com>
Date: Thu, 9 Jul 2015 11:26:27 +0300
Subject: [PATCH 8/9] throw error if page not specified

---
 ui/builder/builder.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/builder/builder.ts b/ui/builder/builder.ts
index 5b6458c05..288236120 100644
--- a/ui/builder/builder.ts
+++ b/ui/builder/builder.ts
@@ -217,7 +217,11 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr
     // Add component CSS file if exists.
     var cssFileName = fileName.replace(".xml", ".css");
     if (fs.File.exists(cssFileName) && parentPage) {
-        parentPage.addCssFile(cssFileName);
+        if (parentPage) {
+            parentPage.addCssFile(cssFileName);
+        } else {
+            throw new Error("CSS file found but no page specified. Please specify page in the options!");
+        }
     }
 
     return result;

From 999a0c80f3712fda57ccdcca7abc149d43fe0fe4 Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@telerik.com>
Date: Thu, 9 Jul 2015 14:00:16 +0300
Subject: [PATCH 9/9] file resolver added + lint errors fixed

---
 ui/builder/builder.ts | 48 +++++++++++++++++++++++++++++--------------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/ui/builder/builder.ts b/ui/builder/builder.ts
index 288236120..4d2f05bef 100644
--- a/ui/builder/builder.ts
+++ b/ui/builder/builder.ts
@@ -8,6 +8,8 @@ import templateBuilderDef = require("ui/builder/template-builder");
 import platform = require("platform");
 import definition = require("ui/builder");
 import page = require("ui/page");
+import fileResolverModule = require("file-system/file-name-resolver");
+import trace = require("trace");
 
 var KNOWNCOLLECTIONS = "knownCollections";
 
@@ -185,22 +187,25 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr
     var result: componentBuilder.ComponentModule;
     componentPath = componentPath.replace("~/", "");
 
-    var fileName = componentPath;
+    var fullComponentPathFilePathWithoutExt = componentPath;
 
-    if (!fs.File.exists(fileName)) {
-        fileName = fs.path.join(fs.knownFolders.currentApp().path, componentPath, componentName) + ".xml";
+    if (!fs.File.exists(componentPath)) {
+        fullComponentPathFilePathWithoutExt = fs.path.join(fs.knownFolders.currentApp().path, componentPath, componentName);
     }
 
-    if (fs.File.exists(fileName)) {
+    var xmlFilePath = resolveFilePath(fullComponentPathFilePathWithoutExt, "xml");
+
+    if (xmlFilePath) {
         // Custom components with XML
-        var jsPath = fileName.replace(".xml", ".js");
+        var jsFilePath = resolveFilePath(fullComponentPathFilePathWithoutExt, "js");
+
         var subExports;
-        if (fs.File.exists(jsPath)) {
+        if (jsFilePath) {
             // Custom components with XML and code
-            subExports = require(jsPath.replace(".js", ""))
+            subExports = require(jsFilePath)
         }
 
-        result = loadInternal(fileName, subExports);
+        result = loadInternal(xmlFilePath, subExports);
 
         // Attributes will be transfered to the custom component
         if (types.isDefined(result) && types.isDefined(result.component) && types.isDefined(attributes)) {
@@ -215,32 +220,45 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr
     }
 
     // Add component CSS file if exists.
-    var cssFileName = fileName.replace(".xml", ".css");
-    if (fs.File.exists(cssFileName) && parentPage) {
+    var cssFilePath = resolveFilePath(fullComponentPathFilePathWithoutExt, "css");
+    if (cssFilePath) {
         if (parentPage) {
-            parentPage.addCssFile(cssFileName);
+            parentPage.addCssFile(cssFilePath);
         } else {
-            throw new Error("CSS file found but no page specified. Please specify page in the options!");
+            trace.write("CSS file found but no page specified. Please specify page in the options!", trace.categories.Error, trace.messageType.error);
         }
     }
 
     return result;
 }
 
+var fileNameResolver: fileResolverModule.FileNameResolver;
+function resolveFilePath(path, ext): string {
+    if (!fileNameResolver) {
+        fileNameResolver = new fileResolverModule.FileNameResolver({
+            width: platform.screen.mainScreen.widthDIPs,
+            height: platform.screen.mainScreen.heightDIPs,
+            os: platform.device.os,
+            deviceType: platform.device.deviceType
+        });
+    }
+    return fileNameResolver.resolveFileName(path, ext);
+}
+
 export function load(pathOrOptions: string | definition.LoadOptions, context?: any): view.View {
     var viewToReturn: view.View;
     var componentModule: componentBuilder.ComponentModule;
 
     if (!context) {
         if (!types.isString(pathOrOptions)) {
-            var options = <definition.LoadOptions>pathOrOptions;
+            let options = <definition.LoadOptions>pathOrOptions;
             componentModule = loadCustomComponent(options.path, options.name, undefined, options.exports, options.page);
         } else {
-            var path = <string>pathOrOptions;
+            let path = <string>pathOrOptions;
             componentModule = loadInternal(path);
         }
     } else {
-        var path = <string>pathOrOptions;
+        let path = <string>pathOrOptions;
         componentModule = loadInternal(path, context);
     }