Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-119076

Fix sorting in _custom_properties_variables.scss and _custom_properties_set.scss

    Details

    • Type: Task
    • Status: Closed
    • Priority: Minor
    • Resolution: Completed
    • Affects Version/s: None
    • Fix Version/s: Master
    • Labels:
      None

      Description

      This was brought up by Brian in PR review here:

      https://github.com/brianchandotcom/liferay-portal/pull/92536#issuecomment-672025780

      We weren't sure exactly what he wanted so I asked him for more specificity (no pun intended... specificity... CSS... geddit?):

      https://github.com/brianchandotcom/liferay-portal/pull/92536#issuecomment-672731389

      I was able to clarify with him on the weekly call what he meant and it is the following.

      In this file:

      https://github.com/liferay/liferay-portal/blob/141a9cfed2153f56e14ec4918f696ceac2b7d4a9/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss

      • 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:

      https://github.com/liferay/liferay-portal/blob/141a9cfed2153f56e14ec4918f696ceac2b7d4a9/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_set.scss

      • 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:

      https://github.com/liferay/liferay-portal/blob/141a9cfed2153f56e14ec4918f696ceac2b7d4a9/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_set.scss

      I'll create a separate ticket for sorting consecutive CSS variables within a group.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              brian.chan Brian Chan
              Reporter:
              greg.hurrell Greg Hurrell (Inactive)
              Engineering Assignee:
              Eduardo Allegrini
              Recent user:
              Tomáš Polešovský
              Participants of an Issue:
              Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package
                  Master