Add custom-properties-alphabetical-order rule

[hgl]

It seems that there is no option to sort custom properties. Is it an intentional decision or it's planned?

[hudochenkov]

I'm not sure if sorting custom properties is a safe operation and it won't break resulting CSS.

[hgl]

@hudochenkov thanks for the quick reply.

Do you happen to know any case where it can break? I just checked the csswg, it doesn't seem to mention anything about order being important.

[hudochenkov]

I don't have experience with custom properties, so I don't know of any cases when the order matters.

[larsenwork]

I don't think the order is important — e.g. this

:root {
  --width: 40px;
  --max-width: calc(50vw - var(--width));
}

and this

:root {
  --max-width: calc(50vw - var(--width));
  --width: 40px;
}

does the exact same thing.

Let's say one would have alphabetic sorting then --max-width would be first but since it uses --width it seems a bit weird.

Not sure I'd ever want my custom props sorted but maybe I'm just missing a good use case.

[hgl]

I’m in the hope that they might compress better, just like why you’d want to sort regular properties.

[felixfbecker]

I have a use case where I'd really like to order custom declarations, and I'd like to order them by their value (with natural sorting). The use case is I have a file with all the z-indexes of the app defined as custom properties, and I'd like to have them in order to make it easy to see how they will stack. Example:

/* stylelint-enable order/order */
:root {
    --z-index-panel: 1;
    --z-index-autocomplete: 2;
    --z-index-tooltip: 3;
}

[shirotech]

+1 it's much cleaner in alphabetical order, right now have to do it manually.

[hudochenkov]

Looks like sorting custom properties wouldn't break CSS code logic, because they are properties. Unlike variables like in preprocessors.

I'm open for a pull request to add new rule.

• Name: custom-properties-alphabetical-order
• Primary option: true
• Secondary options: None
• Message: Expected ${first} to come before ${second}. E. g. “Expected --a-property to come before --b-property”.
• Description: "Specify the alphabetical order of custom properties within declaration blocks."

It could be based on properties-alphabetical-order. However, properties-alphabetical-order has one bug and one improvement, which could be considered a bug. I would suggest fixing this two problems, and then base new rule on properties-alphabetical-order. New rule should not have these bugs.

For autofixing new option should be added to postcss-sorting (this plugin powers all order-related stylesheet transforms):

• Name: custom-properties-order
• Primary option: "alphabetical"

This rule won't add much value without autofix.