rules-delimiter option for csscomb.js

rules-delimiter.js

module.exports = {
    name: 'rules-delimiter',

    syntax: ['scss'],

    runBefore: "strip-spaces",

    setValue: function(value) {
        if (typeof value === 'number') {
            value =  Array(value + 2).join('\n');
        }

        return value;
    },

    process: function(nodeType, node) {
        var value = this.getValue('rules-delimiter'),
            currentNode,
            previousNode;

        for(var i = node.length; i--;) {
            currentNode = node[i];
            previousNode = node[i - 1];

            if(currentNode[0] === 'ruleset' && previousNode) {
                if(previousNode[0] === 's') {
                    if (node[i - 2] && (node[i - 2][0] === 'commentSL' || node[i - 2][0] === 'commentML')) continue;

                    node[i - 1][1] = previousNode[1].replace(/\n*/, value);
                }
            }
        }
    }
};

This creates additional empty spaces between root selectors every time CSSComb is run.

This:

body {
    color: red;



    &::after {
        content: '';
    }
}

a {
    background: blue;
}

Becomes this:

body {
    color: red;

    &::after {
        content: '';
    }
}


a {
    background: blue;
}

Becomes this:

body {
    color: red;

    &::after {
        content: '';
    }
}



a {
    background: blue;
}

Fixed additional empty spaces between root selectors every time CSSComb is run

This is not working for me.

I created a rules-delimiter.js file in csscomb/3.0.2/package/lib/options and copy and pasted the gist.

I tried "rules-delimiter": "\n", and "rules-delimiter": true, in my .csscomb.json file.

Although csscomb runs successfully, there is no line break inserted before psuedo element.

Any help? What am I doing wrong?

@middle8media Try "rules-delimiter": 1, or however many lines you'd like.
Thanks for this gist! This is an amazing help to my development!

+1 awesome solution. Thank you!

Thank you for your work, your solution does almost everything I need except adding new lines around @includes that are directly followed by {...} like these

@include breakpoint($breakpoint_small_desktop) {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

I have tried hacking around the gonzales-pe portion of css-comb to make this work, but now my head hurts. There is actually the correct case for the @include rule implemented for this in gonzales-pe, I would just need to make a separate rule for this isolating this case from the include one-liners. Could you help me out on this?
Being able to "comb" multi-line @include rules like the one above differently from @include one-liners or @extends etc. would be amazing

OK I have found a terribly hacky solution for this:

if((currentNode[0] === 'ruleset' || currentNode[0] === 'include') && previousNode) {

    if(currentNode.toString().indexOf("block") > -1){

        if(previousNode[0] === 's') {
            if (node[i - 2] && (node[i - 2][0] === 'commentSL' || node[i - 2][0] === 'commentML')) continue;

            node[i - 1][1] = previousNode[1].replace(/\n*/, value);
        }

    }

}

It does the trick but obviously, it isn't pretty. I have asked a question regarding adding a separate rule for @include blocks in the gonzales-pe repository as well.

Edit: If somebody else is wondering about this, Tony has kindly shown the non-hackish way to do this here: tonyganch/gonzales-pe#52 (comment)

Thanks for your awesome workaround.
I'm almost happy with this, except one tiny issue:
BEFORE

h3
{
    @include font-size(14);
    line-height: 1.2em;
    position: relative;
    clear: both;
    text-transform: uppercase;

    @media #{$medium-up}
    {
        @include font-size(22);
        float: right;
        margin-top: 25px;
        text-align: right;
    }

    @media #{$large-up}
    {
        @include font-size(30);
    }
}

AFTER

h3
{
    @include font-size(14);
    line-height: 1.2em;
    position: relative;
    clear: both;
    text-transform: uppercase;
    @media #{$medium-up}
    {
        @include font-size(22);
        float: right;
        margin-top: 25px;
        text-align: right;
    }
    @media #{$large-up}
    {
        @include font-size(30);
    }
}

Any solution for this one?