Alphabetize CSS4 variables

[russcarver]

Can you add in the alphabetization of CSS4 variables?

These are the CSS variables that start with --

For example, --component-height: 20px;

I would expect them to be grouped together, alphabetized amongst their group and to be the first group.

For example.

.my-class {
  --component-height: 20px;
  --component-width: 10px;
  background: transparent;
  color: red;
  display: none;
}

[russcarver]

FYI, I saw an older issue that was closed saying "seems there is no need", but that is not true. Here is one example of CSS variable ordering not working:

Before:

    ion-button {
      height: 40px;
      --color: #2487ab;
      font-weight: 300 !important;
      --padding-start: 0px !important;
      --padding-end: 0px !important;
      ion-row {
        width: 100%;
        ion-icon {
          padding-left: 5px !important;
          font-size: 22px !important;
          padding-right: 6rem !important;
        }
      }
      width: 145px;
      --background: transparent;
      --background-activated: transparent;
      ion-icon {
          color: #2487ab;
      }
    }

After:

    ion-button {
      height: 40px;
      --color: #2487ab;
      font-weight: 300 !important;
      --padding-start: 0px !important;
      --padding-end: 0px !important;
      width: 145px;
      --background: transparent;
      --background-activated: transparent;
      ion-row {
        width: 100%;
        ion-icon {
          font-size: 22px !important;
          padding-left: 5px !important;
          padding-right: 6rem !important;
        }
      }
      ion-icon {
        color: #2487ab;
      }
    }

Not only did it simply move these 3 lines up:

      width: 145px;
      --background: transparent;
      --background-activated: transparent;

but it also did not group & sort the CSS variables in any manner.

Here's what I'd like to have:

    ion-button {
      --background: transparent;
      --background-activated: transparent;
      --color: #2487ab;
      --padding-end: 0px !important;
      --padding-start: 0px !important;
      height: 40px;
      font-weight: 300 !important;
      width: 145px;

      ion-row {
        width: 100%;

        ion-icon {
          font-size: 22px !important;
          padding-left: 5px !important;
          padding-right: 6rem !important;
        }
      }

      ion-icon {
        color: #2487ab;
      }
    }