Merge pull request #2070 from NativeScript/nnikolov/CssSpecifityFix

Fixed css specificity levels for type selectors.

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

@@ -1400,6 +1400,32 @@ export function test_alone_attr_selector() {
     }
     helper.buildUIAndRunTest(testButton, testFunc, testCss);
 }
+
+export function test_UsingSameSelectors_ShouldApplyLatest() {
+    let testButton = new buttonModule.Button();
+    testButton.className = 'green';
+    
+    let testCss = ".green { background-color: #FF0000; } .green { background-color: #00FF00; }";
+    
+    let testFunc = function (views: Array<viewModule.View>) {
+        // style from correct type css should be applied
+        helper.assertViewBackgroundColor(testButton, "#00FF00");
+    }
+    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+}
+
+export function test_UsingSameSelectorsWithSpecific_ShouldApplyLatest() {
+    let testButton = new buttonModule.Button();
+    testButton.className = 'red green';
+    
+    let testCss = ".red { background-color: #FF0000; } Button.green { background-color: #00FF00; }";
+    
+    let testFunc = function (views: Array<viewModule.View>) {
+        // style from correct type css should be applied
+        helper.assertViewBackgroundColor(testButton, "#00FF00");
+    }
+    helper.buildUIAndRunTest(testButton, testFunc, testCss);
+}
 // <snippet module="ui/styling" title="styling">
 // For information and example how to use style properties please refer to special [**Styling**](../../../styling.md) topic. 
 // </snippet>

ui/styling/css-selector.ts

@@ -143,7 +143,12 @@ export class CssSelector {
 
 class CssTypeSelector extends CssSelector {
     get specificity(): number {
-        return TYPE_SPECIFICITY;
+        let result = TYPE_SPECIFICITY;
+        let dotIndex = this.expression.indexOf(DOT);
+        if (dotIndex > -1) {
+            result += CLASS_SPECIFICITY;
+        }
+        return result;
     }
     public matches(view: view.View): boolean {
         let result = matchesType(this.expression, view);