Merge pull request #1773 from NativeScript/css-property

Plain component properties now can be applied from CSS

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

@@ -30,6 +30,28 @@ export function test_css_dataURI_is_applied_to_backgroundImageSource() {
     });
 }
 
+export function test_css_is_applied_to_normal_properties() {
+    var stack = new stackModule.StackLayout();
+
+    helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
+        var page = <pageModule.Page>views[1];
+        var expected = "horizontal";
+        page.css = `StackLayout { orientation: ${expected}; }`;
+        TKUnit.assertEqual(stack.orientation, expected);
+    });
+}
+
+export function test_css_is_applied_to_special_properties() {
+    var stack = new stackModule.StackLayout();
+
+    helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
+        var page = <pageModule.Page>views[1];
+        var expected = "test";
+        page.css = `StackLayout { class: ${expected}; }`;
+        TKUnit.assertEqual(stack.className, expected);
+    });
+}
+
 // Test for inheritance in different containers
 export function test_css_is_applied_inside_StackLayout() {
     var testButton = new buttonModule.Button();

ui/builder/component-builder.ts

@@ -6,6 +6,7 @@ import {File, Folder, path, knownFolders} from "file-system";
 import {getBindingOptions, bindingConstants} from "./binding-builder";
 import * as debugModule from "utils/debug";
 import * as platformModule from "platform";
+import {convertString} from "utils/utils";
 
 //the imports below are needed for special property registration
 import "ui/layouts/dock-layout";
@@ -183,19 +184,7 @@ export function setPropertyValue(instance: View, instanceModule: Object, exports
             attrHandled = (<any>instance)._applyXmlAttribute(propertyName, propertyValue);
         }
         if (!attrHandled) {           
-            if (propertyValue.trim() === "") {
+            instance[propertyName] = convertString(propertyValue);
-                instance[propertyName] = propertyValue;
-            } else {
-                // Try to convert value to number.
-                var valueAsNumber = +propertyValue;
-                if (!isNaN(valueAsNumber)) {
-                    instance[propertyName] = valueAsNumber;
-                } else if (propertyValue && (propertyValue.toLowerCase() === "true" || propertyValue.toLowerCase() === "false")) {
-                    instance[propertyName] = propertyValue.toLowerCase() === "true" ? true : false;
-                } else {
-                    instance[propertyName] = propertyValue;
-                }
-            }
         }
     }
 }

ui/styling/css-selector.ts

@@ -5,6 +5,7 @@ import * as trace from "trace";
 import * as styleProperty from "ui/styling/style-property";
 import * as types from "utils/types";
 import * as utils from "utils/utils";
+import {getSpecialPropertySetter} from "ui/builder/special-properties";
 
 var ID_SPECIFICITY = 1000000;
 var ATTR_SPECIFITY = 10000;
@@ -57,12 +58,26 @@ export class CssSelector {
 
     public apply(view: view.View) {
         this.eachSetter((property, value) => {
+            if(types.isString(property)) {
+                let attrHandled = false;
+                let specialSetter = getSpecialPropertySetter(property);
+                
+                if (!attrHandled && specialSetter) {
+                    specialSetter(view, value);
+                    attrHandled = true;
+                }
+                
+                if (!attrHandled && property in view) {
+                    view[property] = utils.convertString(value);
+                }
+            } else {
                 try {
                     view.style._setValue(property, value, observable.ValueSource.Css);
                 }
                 catch (ex) {
                     trace.write("Error setting property: " + property.name + " view: " + view + " value: " + value + " " + ex, trace.categories.Style, trace.messageType.error);
                 }
+            }
         });
     }
 
@@ -85,6 +100,8 @@ export class CssSelector {
                         let pair = pairs[j];
                         callback(pair.property, pair.value);
                     }
+                } else {
+                    callback(declaration.property, declaration.value);
                 }
             }
         }
@@ -155,13 +172,13 @@ class CssClassSelector extends CssSelector {
 class CssCompositeSelector extends CssSelector {
     get specificity(): number {
         let result = 0;
-        for(let i = 0; i < this.parentCssSelectors.length; i++) {
+        for (let i = 0; i < this.parentCssSelectors.length; i++) {
             result += this.parentCssSelectors[i].selector.specificity;
         }
         return result;
     }
 
-    private parentCssSelectors: [{ selector: CssSelector, onlyDirectParent: boolean}];
+    private parentCssSelectors: [{ selector: CssSelector, onlyDirectParent: boolean }];
 
     private splitExpression(expression) {
         let result = [];
@@ -197,12 +214,12 @@ class CssCompositeSelector extends CssSelector {
         let expressions = this.splitExpression(expr);
         let onlyParent = false;
         this.parentCssSelectors = <any>[];
-        for(let i = expressions.length - 1; i >= 0; i--) {
+        for (let i = expressions.length - 1; i >= 0; i--) {
             if (expressions[i].trim() === GTHAN) {
                 onlyParent = true;
                 continue;
             }
-            this.parentCssSelectors.push({selector: createSelector(expressions[i].trim(), null), onlyDirectParent: onlyParent});
+            this.parentCssSelectors.push({ selector: createSelector(expressions[i].trim(), null), onlyDirectParent: onlyParent });
             onlyParent = false;
         }
     }
@@ -213,7 +230,7 @@ class CssCompositeSelector extends CssSelector {
             return result;
         }
         let tempView = view.parent;
-        for(let i = 1; i < this.parentCssSelectors.length; i++) {
+        for (let i = 1; i < this.parentCssSelectors.length; i++) {
             let parentCounter = 0;
             while (tempView && parentCounter === 0) {
                 result = this.parentCssSelectors[i].selector.matches(tempView);
@@ -277,10 +294,10 @@ function matchesAttr(attrExpression: string, view: view.View): boolean {
 
             // only = (EQUAL)
             default:
-                attrCheckRegex = new RegExp("^"+escapedAttrValue+"$");
+                attrCheckRegex = new RegExp("^" + escapedAttrValue + "$");
                 break;
         }
-        return !types.isNullOrUndefined(view[attrName]) && attrCheckRegex.test(view[attrName]+"");
+        return !types.isNullOrUndefined(view[attrName]) && attrCheckRegex.test(view[attrName] + "");
     } else {
         return !types.isNullOrUndefined(view[attrExpression]);
     }

utils/utils-common.ts

@@ -34,6 +34,26 @@ export function escapeRegexSymbols(source: string): string {
     return source.replace(escapeRegex, "\\$&");
 }
 
+export function convertString(value: string): any {
+    var result;
+    
+    if (value.trim() === "") {
+        result = value;
+    } else {
+        // Try to convert value to number.
+        var valueAsNumber = +value;
+        if (!isNaN(valueAsNumber)) {
+            result = valueAsNumber;
+        } else if (value && (value.toLowerCase() === "true" || value.toLowerCase() === "false")) {
+            result = value.toLowerCase() === "true" ? true : false;
+        } else {
+            result = value;
+        }
+    }
+    
+    return result;
+}
+
 export module layout {
 
     var MODE_SHIFT = 30;

utils/utils.d.ts

@@ -235,4 +235,10 @@
      * @param source The original value. 
      */
     export function escapeRegexSymbols(source: string): string
+    
+    /**
+     * Converts string value to number or boolean.
+     * @param value The original value. 
+     */
+    export function convertString(value: string): any    
 }