Parameters to add empty lines before or after children rules and @rules

[andrew--r]

Hello.

I'd like to have an ability to add empty lines before or after children rules and at-rules. Right now we can only specify number of empty lines between rules of similar type (like children or at-rules), but it's not too practical.

Instead of this:

.block {
    display: block;
    margin: auto;
    @media (max-width: 640px) {
        width: 100%;
    }

    @media (max-width: 1200px) {
        width: 90%;
    }
    &--modifier {
        background: red;
    }

    &--another-modifier {
        background: green;
    }
}

we should have something like this:

.block {
    display: block;
    margin: auto;

    @media (max-width: 640px) {
        width: 100%;
    }

    @media (max-width: 1200px) {
        width: 90%;
    }

    &--modifier {
        background: red;
    }

    &--another-modifier {
        background: green;
    }
}

I suggest to replace parameters empty-lines-between-media-rules and empty-lines-between-children-rules with empty-lines-before-media-rules, empty-lines-before-children-rules, empty-lines-after-media-rules, empty-lines-after-children-rules.

What do you think about it? I'd like to implement it and create a PR, if you don't mind.

[hudochenkov]

You can achieve desired result with this config:

{
    "sort-order": [
        [ "..." ],
        [ ">child" ],
        [ "@media" ]
    ],
    "empty-lines-between-children-rules": 1,
    "empty-lines-between-media-rules": 1
}

sort-order is array of arrays. Each array is a group and groups devided by empty line. There is no empty lines inside group, so empty-lines-between-children-rules and empty-lines-between-media-rules were added to fix this.

[andrew--r]

Cool, thanks a lot!