csscomb remove linebreak between soorting groups

1.6k Views Asked by At

Im using csscomb.js to organize my css. It works perfectly except I don't want the linebreaks in between the soorting groups.[see image]

Is there a way to remove those? I looked every where.

enter image description hereexample

This is mij setup:

 "remove-empty-rulesets": false,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "  ",
    "color-shorthand": false,
    "element-case": "lower",
    "leading-zero": true,
    "quotes": "single",
    "sort-order-fallback": "abc",
    "space-before-colon": "",
    "space-after-colon": " ",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": "\n",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "\n",
    "strip-spaces": false,
    "tab-size": true,
    "unitless-zero": true,
    "vendor-prefix-align": true,
2

There are 2 best solutions below

0
On

There is no option for that, but here is a workaround that I use.

Edit property named sort-order like this:

Original:

"sort-order": [
        [
            "font",
            "font-family",
            "font-size",
            "font-weight",
            "font-style",
            "font-variant",
            "font-size-adjust",
            "font-stretch",
            "font-effect",
            "font-emphasize",
            "font-emphasize-position",
            "font-emphasize-style",
            "font-smooth",
            "line-height"
        ],
        [
            "position",
            "z-index",
            "top",
            "right",
            "bottom",
            "left"
        ],
        ...

New:

    "sort-order": [
        [
            "font",
            "font-family",
            "font-size",
            "font-weight",
            "font-style",
            "font-variant",
            "font-size-adjust",
            "font-stretch",
            "font-effect",
            "font-emphasize",
            "font-emphasize-position",
            "font-emphasize-style",
            "font-smooth",
            "line-height",
            "position",
            "z-index",
            "top",
            "right",
            "bottom",
            "left",
            ...
         ]
     ]

Basically you merge the groups into one, so no separating lines are added. Here is official response from Csscomb creators: github.com/csscomb/csscomb.js/issues/314

0
On

You can try to connect the plug csscomb-group-size to csscomb, as is looking for the answer itself ....
Here a little bit about that developers write:

CSScomb - a great tool, but sometimes you want to add anything. So we tried to make the code as much as possible a modular and easily expandable. You can add the "comb" the desired function is not bothered with the fork. To do this, there are three ways:

connect a third-party plug-in
write your plugin
done on the basis of its postprocessor CSScomb

Third-party plug-ins

The easiest way to use someone else's plug. For example, here's an option that removes the blank line between the declarations groups when the group returns too little. Connect plugin is quite simple, for this is the use () method:

var CSScomb = require('csscomb');
var groupSize = require('csscomb-group-size');

 // Number 4 indicates that if the group is less than 4 returns between this
 // And the previous group will remove the empty string delimiter:
var config = { 'group-size': 4 };

// Create a new instance of the "comb":
var csscomb = new CSScomb().use(groupSize).configure(config);

// Works wonders:
csscomb.processPath('path/to/css');  

But how to make it all work, I could not understand, perhaps, you will learn in detail the documentation and understand.