[ALOY-1212] TSS: class assignment order affects application of properties which doesn't match CSS rules
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | Medium |
| Status | Open |
| Resolution | Unresolved |
| Affected Version/s | n/a |
| Fix Version/s | n/a |
| Components | Styling |
| Labels | parsing, tss |
| Reporter | Mads Moller |
| Assignee | Tim Poulsen |
| Created | 2014-08-26T14:17:56.000+0000 |
| Updated | 2015-03-26T00:30:52.000+0000 |
Description
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.
Classes are applied in the order you list in the
classattribute with the rightmost (last-specified) class taking precedence. The order of definition in the TSS file has no bearing. Changing toclass="BlueText Icon"would create a black label.@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.
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."
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
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.
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.