The NativeScript team released a feature under the cover of dark; not even listed in the change log; but Panayot; did a refactoring of the CSS selector system in NativeScript. With his changes he has not only sped up the selector code in most cases but he added some additional features like
[myAttrib="yes"] > .figure { color: red; }
And fixed several things that were broken in earlier versions like:
.android.landscape Button { background-color: blue; }
.landscape.ios Button { background-color: green; }If you understand why this is so important; this opens up CSS a LOT. For example; I have two plugins; nativescript-orientation, and nativescript-platform-css. Orientation automatically will put landscape as a class of the <Page> when you are in landscape mode; this allows you to have custom css for landscape mode. It allows a lot of flexibility. However, when I created the platform-css plugin it automatically adds ios or android to the Page classes. Again this added a lot of flexibility as you could in a single css file do:
Button.ios { margin: 20; }
Button.android { margin: 15; }To allow you to style the buttons so they look properly on each platform. However the OLD CSS style system would not detect that "landscape ios" should use the rule:
.landscape.ios Button {}
or
.ios.landscape Button {}
So, originally I had to add a HACK to my NS-orientation plugin to detect if you were using my platform-css plugin so that it could create a special css class rule to allow the second rule (.ios.landscape) to work as expected. Now with the all new css selector system in 2.2.0; it all works properly; and ALL variations of the rules are valid and I don't have to do anything extra!
Major Kudos from me to Panayot! This fixed a number of other weird CSS corner cases that have been in the issues list for a while. So this was a imho one of the best new features of 2.2.0...
Now, there is another awesome new feature that Panayot did; he has pseudo selectors; at this moment the button now supports both a normal state and a highlighted state. So you can do:
Button:highlighted {
background-color: cyan;
}
And the button will change to a cyan background when clicked and on Android 5+ you will still even get the ripples! Awesome job Panayot!