This was brought up by Brian in PR review here:
We weren't sure exactly what he wanted so I asked him for more specificity (no pun intended... specificity... CSS... geddit?):
I was able to clarify with him on the weekly call what he meant and it is the following.
In this file:
- We want to follow the existing pattern of sorting groups, and putting a blank line in between groups (sorting only happens within groups, not across groups).
- In this file most of the variables are in order within groups, but some are not. For example, under "Colors" there are numerous sorting errors, likewise under "Shadows", "Fonts" etc. Basically, sweep through the entire file and correct every group.
- Secondly, the ordering of the groups should be corrected. For example "Text muted" -> "Blockquotes" > "Separator" > "Body" are all wrong. Here again, sweep through the whole file and order the groups.
- The theme-colors-cp map is also out of order (lines 26, 35); now... unlike CSS variables, which I believe we can order any way we want without affecting their behavior, SCSS maps are ordered collections, so we have to be careful. Looking at the one place this map is used, you can see us making declarations of the form ".bg-COLOR" and ".text-COLOR" in order. As far as I can tell, that means the map is safely sortable:
- Brian also complained about the order in the neighboring file looking arbitrary. Now, this one is a bunch of declarations, and order matters, but we should look at this file and see if we can move the sections into order (eg. "Headers" > "Display" are out of order, as are many others); the idea then is to review this file too and order wherever it is safe to do so, and leave things as-is when it is unsafe:
I'll create a separate ticket for sorting consecutive CSS variables within a group.