Insert comments with CSScomb (using Sublime Text)

Question

I client of mine asked to have a lot of comments in the code - including css files.

So I thought about using CSScomb to reorganize the css code and add comments automatically. It doesn't make sense but why not.

So the idea would be to change the config file which states:

[
    "font",
    "font-family"
],
[
    "padding",
    "margin"
]
...

but get an output that writes:

/* FONT STYLE */
font: ....;
font-family: ....;

Any ideas ?

Answer 1

DIY Group Comments

You can add this functionality yourself by editing the sort-order.js file in the CSScomb package.

1. With Sublime Text open, from the menu choose Preferences > Browse Packages…; This will open the Packages folder.
2. From the Packages folder, navigate to CSScomb/node_modules/csscomb/lib/options/sort-order.js.
3. Create a copy of this file for retrieval in case you want to revert your changes. I gave my copy a name of sort-order-original.js.
   Create a copy of this file in a different directory for retrieval in case you want to revert your changes. I moved my copy up one level into a new directory ../originals/options/sort-order.js.
   Note: If you simply rename the copy in the existing directory it may get included and run by the module; so, it is safest to just move it into a new location.
4. Open sort-order.js in Sublime Text for editing.
5. Consult this diff for the necessary changes to be made.
   Consult this diff for the necessary changes to be made. (This latest version adds new logic to prevent the group comments from being duplicated when running CSScomb multiple times.)
6. If you feel comfortable with these changes, copy & paste them in their entirety to replace the contents of sort-order.js. You may choose to edit further to suit your needs. Save.
   Note: Essentially, these changes are extending each sorted object with an additional property that contains a CSS comment optionally provided by you in your User Settings. I will show you where to add the comments in the next step.
7. Now, you're ready to add comments by group. From the Sublime Text menu, choose Preferences > Package Settings > CSScomb > Settings – User. If you haven't already configured your own settings, you can get started by copying the contents of the Settings – Default into Settings – User.
8. In the user settings file, find the "sort-order" property. It is either an array of property names or an array of arrays of property names. By default, CSScomb will add a blank line between the nested array groups, but we've modified the file that does this.
9. You may now optionally add a comment as the first property of any nested array. The sort-order.js file will detect this and output it at the top of the group. If no comment is defined, the default blank line is output instead.

Example User Settings:

"sort-order": [
    [
        "/* LAYOUT */",
        "position",
        "z-index",
        "top",
        "right",
        "bottom",
        "left"
    ],
    [
        "/* DISPLAY */",
        "display",
        …
        "flex-align"
    ],
    [
        "/* TYPOGRAPHY */",
        "font",
        …
        "line-height"
    ],
    [
        …
    ]
]

Before running CSScomb:

.selector {
    font-family: Arial;
    line-height: 1;
    position: relative;
    display: block;
    background-color: red;
}

After running CSScomb:

.selector {

    /* LAYOUT */
    position: relative;

    /* DISPLAY */
    display: block;

    /* TYPOGRAPHY */
    font-family: Arial;
    line-height: 1;

    background-color: red;
}