{ "id": "135313", "key": "ALOY-1212", "fields": { "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false }, "project": { "id": "11113", "key": "ALOY", "name": "Alloy", "projectCategory": { "id": "10400", "description": "Tools for developing applications", "name": "Tooling" } }, "fixVersions": [], "resolution": null, "resolutiondate": null, "created": "2014-08-26T14:17:56.000+0000", "priority": { "name": "Medium", "id": "3" }, "labels": [ "parsing", "tss" ], "versions": [], "issuelinks": [ { "id": "44257", "type": { "id": "10003", "name": "Relates", "inward": "relates to", "outward": "relates to" }, "outwardIssue": { "id": "111135", "key": "ALOY-562", "fields": { "summary": "Order of TSS classes declaration has effect instead of order in which they are assigned to an object", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false } } } } ], "assignee": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "updated": "2015-03-26T00:30:52.000+0000", "status": { "description": "The issue is open and ready for the assignee to start work on it.", "name": "Open", "id": "1", "statusCategory": { "id": 2, "key": "new", "colorName": "blue-gray", "name": "To Do" } }, "components": [ { "id": "13603", "name": "Styling", "description": "TSS, dynamic styling, styling API" } ], "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:\r\n\r\nExample: https://gist.github.com/viezel/a63562fc7e9b7a7f3290\r\n\r\nHere 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. \r\n\r\nThis is incorrect - if we want Alloy to mimic CSS. ", "attachment": [], "flagged": false, "summary": "TSS: class assignment order affects application of properties which doesn't match CSS rules", "creator": { "name": "viezel", "key": "viezel", "displayName": "Mads Moller", "active": true, "timeZone": "Europe/Berlin" }, "subtasks": [], "reporter": { "name": "viezel", "key": "viezel", "displayName": "Mads Moller", "active": true, "timeZone": "Europe/Berlin" }, "environment": "Alloy 1.4.1", "comment": { "comments": [ { "id": "328019", "author": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "body": "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. ", "updateAuthor": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "created": "2014-10-14T13:40:42.000+0000", "updated": "2014-10-14T13:40:42.000+0000" }, { "id": "328024", "author": { "name": "viezel", "key": "viezel", "displayName": "Mads Moller", "active": true, "timeZone": "Europe/Berlin" }, "body": "@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. ", "updateAuthor": { "name": "viezel", "key": "viezel", "displayName": "Mads Moller", "active": true, "timeZone": "Europe/Berlin" }, "created": "2014-10-14T14:21:46.000+0000", "updated": "2014-10-14T14:21:46.000+0000" }, { "id": "337018", "author": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "body": "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\r\n\r\nFrom 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.\" ", "updateAuthor": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "created": "2014-12-18T17:12:01.000+0000", "updated": "2014-12-18T17:20:25.000+0000" }, { "id": "337129", "author": { "name": "fokkezb", "key": "fokke", "displayName": "Fokke Zandbergen", "active": true, "timeZone": "Europe/Amsterdam" }, "body": "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.\r\n\r\nIn 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:\r\nhttp://codepen.io/anon/pen/emzMyG\r\n\r\nIf 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", "updateAuthor": { "name": "fokkezb", "key": "fokke", "displayName": "Fokke Zandbergen", "active": true, "timeZone": "Europe/Amsterdam" }, "created": "2014-12-19T08:03:15.000+0000", "updated": "2014-12-19T08:03:15.000+0000" }, { "id": "337131", "author": { "name": "viezel", "key": "viezel", "displayName": "Mads Moller", "active": true, "timeZone": "Europe/Berlin" }, "body": "Well in CSS I can do !important like this: http://codepen.io/anon/pen/EayEEL then it works. \r\nHaving the ability to make order have an effect on styling gives greater control. ", "updateAuthor": { "name": "viezel", "key": "viezel", "displayName": "Mads Moller", "active": true, "timeZone": "Europe/Berlin" }, "created": "2014-12-19T08:13:32.000+0000", "updated": "2014-12-19T08:13:32.000+0000" }, { "id": "337132", "author": { "name": "fokkezb", "key": "fokke", "displayName": "Fokke Zandbergen", "active": true, "timeZone": "Europe/Amsterdam" }, "body": "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.", "updateAuthor": { "name": "fokkezb", "key": "fokke", "displayName": "Fokke Zandbergen", "active": true, "timeZone": "Europe/Amsterdam" }, "created": "2014-12-19T08:18:24.000+0000", "updated": "2014-12-19T08:18:24.000+0000" } ], "maxResults": 7, "total": 7, "startAt": 0 } } }