When using a jss the className does not take priority over the\nlabel name as it should.
\nExample:
\n
app.js
\n
\n\nTitanium.UI.setBackgroundColor('#000');\nvar win = Ti.UI.createWindow({\n backgroundColor: '#fff'\n});\nvar normalLabel = Ti.UI.createLabel({\n text: 'Normal label!',\n textAlign: 'center',\n width: 'auto',\n top: 50\n});\nvar redLabel = Ti.UI.createLabel({\n text: 'Red label!',\n textAlign: 'center',\n width: 'auto',\n top: 100,\n className: 'red'\n});\nwin.add(normalLabel);\nwin.add(redLabel);\nwin.open();\n
\n
app.jss
\n
\n\nlabel{ \n color: 'blue'; \n} \n.red { \n font-weight: 'bold';\n color: 'red';\n}\n
\n
Expected: normalLabel to be blue and redLabel\nto be red
\n
Actual: both labels are blue
\n
Associated Helpdesk Ticket
\n
http://developer.appcelerator.com/helpdesk/view/72821
Okay, here goes:
\n
When we compile the CSS into a plist, we create four\ndictionaries: \"ids\" and \"classes\", and corresponding dicts with\nthose names appended with \"density\".
\n
The compiler apparently merges tag selectors and\nclasses into the \"classes\" dictionary, while the ids are kept\nseparate as they should be.
\n
So, in our code, we're iterating over the classes first, then\nthe ids to maintain priority. Works great, right?\nNope.
\n
Since we're iterating over the classes first, which are already\nmerged together with the tag selectors, we lose the precedence that\nthe classes have over the tag selectors.
\n
Also, an interesting test case is to try using a class name like\n\".label\" - this will act exactly as a tag selector would - apply\nthe style to all TiUILabels because of the aforementioned merging\nof the dictionaries!