css import support added

CrossPlatformModules.csproj

@@ -647,6 +647,7 @@
       <SubType>Designer</SubType>
     </Content>
     <Content Include="apps\tests\test-icon.png" />
+    <Content Include="apps\tests\ui\style\test.css" />
     <Content Include="apps\tests\xml-declaration\mymodulewithxml\my-control-no-js.xml">
       <SubType>Designer</SubType>
     </Content>
@@ -1612,7 +1613,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>

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

@@ -758,6 +758,17 @@ export var test_CSS_isAppliedOnPage = function () {
     });
 }
 
+export var test_CSS_isAppliedOnPage_From_Import = 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.css = "@import url('~/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/ui/style/test.css

@@ -0,0 +1 @@
+page { background-color: red; }

ui/styling/style-scope.ts

@@ -5,6 +5,13 @@ import cssSelector = require("ui/styling/css-selector");
 import cssParser = require("js-libs/reworkcss");
 import VisualState = visualState.VisualState;
 import application = require("application");
+import utils = require("utils/utils");
+import types = require("utils/types");
+import fs = require("file-system");
+import file_access_module = require("file-system/file-system-access");
+
+var fileAccess = new file_access_module.FileSystemAccess();
+var pattern: RegExp = /url\(('|")(.*?)\1\)/;
 
 export class StyleScope {
     // caches all the visual states by the key of the visual state selectors
@@ -36,17 +43,21 @@ export class StyleScope {
         this._reset();
         if (this._cssSelectors) {
             var addedSelectors = StyleScope.createSelectorsFromCss(cssString, cssFileName);
-            this._cssSelectors = this._joinCssSelectorsArrays([this._cssSelectors, addedSelectors]);
+            this._cssSelectors = StyleScope._joinCssSelectorsArrays([this._cssSelectors, addedSelectors]);
         }
     }
 
     public static createSelectorsFromCss(css: string, cssFileName: string): cssSelector.CssSelector[] {
         try {
             var pageCssSyntaxTree = css ? cssParser.parse(css, { source: cssFileName }) : null;
-            var pageCssSelectors;
+
+            var pageCssSelectors = new Array<cssSelector.CssSelector>();
+
             if (pageCssSyntaxTree) {
-                pageCssSelectors = StyleScope.createSelectorsFromSyntaxTree(pageCssSyntaxTree);
+                pageCssSelectors = StyleScope._joinCssSelectorsArrays([pageCssSelectors, StyleScope.createSelectorsFromImports(pageCssSyntaxTree)]);
+                pageCssSelectors = StyleScope._joinCssSelectorsArrays([pageCssSelectors, StyleScope.createSelectorsFromSyntaxTree(pageCssSyntaxTree)]);
             }
+
             return pageCssSelectors;
         }
         catch (e) {
@@ -54,15 +65,47 @@ export class StyleScope {
         }
     }
 
+    public static createSelectorsFromImports(tree: cssParser.SyntaxTree): cssSelector.CssSelector[] {
+        var selectors = new Array<cssSelector.CssSelector>();
+
+        if (!types.isNullOrUndefined(tree)) {
+            var imports = tree["stylesheet"]["rules"].filter(r=> r.type === "import");
+
+            for (var i = 0; i < imports.length; i++) {
+                var importItem = imports[i]["import"];
+
+                var match = importItem && (<string>importItem).match(pattern);
+                var url = match && match[2];
+
+                if (!types.isNullOrUndefined(url)) {
+                    if (utils.isFileOrResourcePath(url)) {
+
+                        var fileName = types.isString(url) ? url.trim() : "";
+                        if (fileName.indexOf("~/") === 0) {
+                            fileName = fs.path.join(fs.knownFolders.currentApp().path, fileName.replace("~/", ""));
+                        }
+
+                        fileAccess.readText(fileName, result => {
+                            selectors = StyleScope._joinCssSelectorsArrays([selectors, StyleScope.createSelectorsFromCss(result, fileName)]);
+                        });
+                    }
+                }
+            }
+        }
+
+        return selectors;
+    }
+
     public ensureSelectors() {
         if (!this._cssSelectors && (this._css || application.cssSelectorsCache)) {
             var applicationCssSelectors = application.cssSelectorsCache ? application.cssSelectorsCache : null;
             var pageCssSelectors = StyleScope.createSelectorsFromCss(this._css, this._cssFileName);
-            this._cssSelectors = this._joinCssSelectorsArrays([applicationCssSelectors, pageCssSelectors]);
+
+            this._cssSelectors = StyleScope._joinCssSelectorsArrays([applicationCssSelectors, pageCssSelectors]);
         }
     }
 
-    private _joinCssSelectorsArrays(arrays: Array<Array<cssSelector.CssSelector>>): Array<cssSelector.CssSelector> {
+    private static _joinCssSelectorsArrays(arrays: Array<Array<cssSelector.CssSelector>>): Array<cssSelector.CssSelector> {
         var mergedResult = [];
         var i;
         for (i = 0; i < arrays.length; i++) {