Problem description
Platform specific styles Themes should have always precedence over other styles during the merge process.
This is the correct behavior when using 'app.tss' global style. The one defined in the Theme/styles is being reflected correctly.
However, when using a style file matching a view.xml file, the generic specific-platform style is being used.
See the first sample code attached - app_APP-TSS.zip
In this sample, all styles are handled using 'app.tss' files.
Themes merging behave correctly and theme's app.tss settings get the precedence.
1. Run on Android
Result: blu background and orange view are shown, as defined in themes/dark/styles/app.tss
2. Run on iOS:
Result: purple background and green view are shown, as defined in themes/green/styles/app.tss
See the second sample code attached - app_INDEX-TSS.zip
In this sample, styles are handled using 'index.tss' files and 'app.tss' files.
'index.tss' files defined in specific-platform folders under 'styles/
/index.tss' get the precedence over the ones defined by the specific-platform Themes folder.
1. Run on Android
Result: red background, as defined in 'styles/android/index.tss' file (instead of blue as defined in the index.tss theme being used by Android)
2. Run on iOS
Result: yellow background, as defined in 'styles/ios/index.tss' file (instead of purple as defined in the index.tss theme being used by iOS)
3. Delete generic specific-platform styles folder and create a generic 'index.tss' file under app/styles. Run the app on both platforms.
Result: Themes 'style/platformSpecific/index.tss' style has precedence as expected and the theme style is applied correctly.
The styles you cite here are actually sorting correctly. How the theme is specified in the config.json does not play into the ordering of the style. A platform-specific theme style would not be one set in the config.json, it would instead be one where the theme was structured like this: * themes ** someTheme *** styles **** android ***** index.tss **** ios ***** index.tss **** index.tss So as per the instructions laid out in ALOY-434, this is actually sorting correctly. If you put the index.tss from your example in a platform-specific folder inside the theme it would work as expected. Having said all this, you helped identify a small bug that would prevent platform-specific themes from working properly. I will be fixing it in this ticket.
Resolved in this commit: https://github.com/appcelerator/alloy/commit/229697b735459d5844b06488e683f20cb65924d4 All platform-specific theme folders would have failed on this check. They work now. So any test app that included a theme with a platform-specific style folder would provide a test that this works.
The advanced/themes test app has been modified to include an ios-specific folder in the green theme. This app compiling and running without error on ios would confirm that the bug in question has been resolved.
https://github.com/appcelerator/alloy/tree/master/test/apps/advanced/themesConfirmation from community that 1.1.2-alpha has solved this issue: http://developer.appcelerator.com/question/151717/issues-in-using-class-styles-with-alloy-in-latest-alloy-update
Verified as fixed with Alloy version 1.1.2-alpha, SDK 3.1.0 GA iPhone 5 Android Nexus 4 Sample code: https://github.com/appcelerator/alloy/tree/master/test/apps/advanced/themes