Merge properties-specified-order, properties-flexible-order, and property-groups-structure into new rule

[hudochenkov]

The more I think the more I realise that dividing stylelint's declaration-block-properties-order into more specific rules creates more confusion then clear state of thing. Rule's tidy couple with each other, share lots of code and big pieces of README.

Currently we have:

• declaration-block-properties-specified-order: strict order with unspecified option. Primary option: array of strings.
• declaration-block-properties-alphabetical-order: alphabetical order. Accept only true.
• declaration-block-property-groups-structure: Primary option: array of objects with properties and emptyLineBefore properties. Runs declaration-block-properties-specified-order with properties found in its primary option.
• declaration-block-properties-flexible-order (just added): strict order with unspecified option and support for flexible groups. Primary option: array of strings or objects with property properties. Properties declared within array follow strict order, while properties within object is in flexible order.

declaration-block-properties-specified-order rule is basically limited declaration-block-properties-flexible-order rule.

declaration-block-property-groups-structure should support flexible order as well as strict order. So I have to run declaration-block-properties-flexible-order from declaration-block-property-groups-structure as well as declaration-block-properties-specified-order.

See what a mess it became?

declaration-block-properties-alphabetical-order works great and won't be affected.

I was thinking it's better to merge properties-specified-order, properties-flexible-order, and property-groups-structure into one rule. It would be like declaration-block-properties-order in stylelint 6.5.0. Merged rule will support strict order, flexible order, and emptyLineBefore.

Config would be like:

[
    [
        "height",
        "width",
        {
            emptyLineBefore: "always",
            properties: [
                "color",
                "font-size",
                "font-weight",
            ],
        },
        "flex",
        "display",
        {
            emptyLineBefore: "never",
            order: "flexible",
            properties: [
                "margin-top",
                "margin-bottom",
            ],
        },
    ],
    {
        unspecified: "bottom"
    }
]

Strict order applies for main array and to objects without order: "flexible". emptyLineBefore is optional.

I think the new rule should have name declaration-block-properties-structure. Because it's not about order, but also about emptyLineBefore. I believe there could be a better name, because properties-structure it's not clear enough.

/cc @cascornelissen @osk @swernerx @evilebottnawi what do you think about all of this?

[alexander-akait]

@hudochenkov sgtm and the configuration looks pretty simple

[swernerx]

That looks excellent for me.

[cascornelissen]

As I've stated in #15 I agree it's becoming a bit of a mess. This solution would definitely work for us as well.

What would the default for emptyLineBefore be? I assume never?

[osk]

Clear and covers the use cases we have 👍🏽✨

[hudochenkov]

What would the default for emptyLineBefore be? I assume never?

By default it won't be set at all.

[hudochenkov]

Thank you for your response! Any idea for a better name?

[alexander-akait]

@hudochenkov maybe declaration-block-properties-order :smile:

[swernerx]

as it's already namespaced by the plugin name, why not just name it "properties-order"?

[hudochenkov]

@evilebottnawi :) I like it, but as I said before, this rule concerned not only about order, but about emptyLineBefore also.

[alexander-akait]

@hudochenkov I think this can be omitted, primary function of this rule is order

[hudochenkov]

Just have released 0.4.0 with properties-order! Strict order, flexible order, and emptyLineBefore in one rule :)

Thank you, everyone, for discussion!