[ALOY-1212] TSS: class assignment order affects application of properties which doesn't match CSS rules

GitHub Issuen/a
Affected Version/sn/a
Fix Version/sn/a
Labelsparsing, tss
ReporterMads Moller
AssigneeTim Poulsen


The Alloy tss parsing is a bit incorrect. it relies on where in a .tss file a class is defined rather than following CSS common rules: Example: https://gist.github.com/viezel/a63562fc7e9b7a7f3290 Here the result should give me blue text, but since the BlueText class is above the Icon class, then Alloy let Icon win, even though the BlueText is defined in the end of the class="" markup. This is incorrect - if we want Alloy to mimic CSS.


  1. Tim Poulsen 2014-10-14 Classes are applied in the order you list in the class attribute with the rightmost (last-specified) class taking precedence. The order of definition in the TSS file has no bearing. Changing to class="BlueText Icon" would create a black label.
  2. Mads Moller 2014-10-14 @Tim, if you do class="Icon BlueText" then from a HTML perspective, I would get a blue label. But I dont cause the TSS is handling this linear and incorrect.
  3. Tim Poulsen 2014-12-18 Needs further investigation and triage. If we're attempting to match CSS behaviors, relevant background info is at http://stackoverflow.com/questions/1321692/how-to-specifiy-the-order-of-css-classes From the CSS spec: "Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself."
  4. Fokke Zandbergen 2014-12-19 I confirm with [~viezel] that the current behaviour is that the order of classes has no effect, while I would prefer it to do have effect. In ALOY-562 [~tlukasavage] states that TSS follows the CSS behavior which (I never knew, but) is indeed that the order of classes has no effect like shown here: http://codepen.io/anon/pen/emzMyG If it's a rule set in stone that we follow CSS then I guess this is a feature not a bug, but I rather see W3C change its mind instead :P
  5. Mads Moller 2014-12-19 Well in CSS I can do !important like this: http://codepen.io/anon/pen/EayEEL then it works. Having the ability to make order have an effect on styling gives greater control.
  6. Fokke Zandbergen 2014-12-19 Good point. Although I don't see why Alloy couldn't just decide to be different from CSS and allow the order of classes to have effect.

JSON Source