diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index fb76ed2fa..97a2c6786 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -647,6 +647,7 @@
Designer
+
Designer
@@ -1612,7 +1613,7 @@
False
-
+
\ No newline at end of file
diff --git a/apps/tests/ui/style/style-tests.ts b/apps/tests/ui/style/style-tests.ts
index 6879dbfe0..23c26253b 100644
--- a/apps/tests/ui/style/style-tests.ts
+++ b/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) {
+ var page: pageModule.Page = views[1];
+ page.css = "@import url('~/ui/style/test.css');";
+ helper.assertViewBackgroundColor(page, "#FF0000");
+ });
+}
+
//
// For information and example how to use style properties please refer to special [**Styling**](../../../styling.md) topic.
//
diff --git a/apps/tests/ui/style/test.css b/apps/tests/ui/style/test.css
new file mode 100644
index 000000000..b310c84d7
--- /dev/null
+++ b/apps/tests/ui/style/test.css
@@ -0,0 +1 @@
+page { background-color: red; }
\ No newline at end of file
diff --git a/ui/styling/style-scope.ts b/ui/styling/style-scope.ts
index 5859ef2e6..f21ee8535 100644
--- a/ui/styling/style-scope.ts
+++ b/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();
+
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();
+
+ 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 && (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 {
+ private static _joinCssSelectorsArrays(arrays: Array>): Array {
var mergedResult = [];
var i;
for (i = 0; i < arrays.length; i++) {