Customizing CSScomb (can't get it to work the way I want)

[gerbenvandijk]

Hi there,

I'd like to indent all my code like this (I know, unconventional but personal preference, reads nice IMHO):

.mq-nest-test-no-mq {

    color: @orange;
    display: block;
    position: absolute;
    margin-top: 10px;

}

@media screen only and (max-width: 500px) {

    .mq-est-test-mq-outer {

        color: true;

    }

}

.mq-est-test-mq-inner {

    @media screen only and (max-width: 700px) {

        color: orange;

        @media screen only and (max-height: 200px) {

            .mq-est-test-mq-inner-nested {

                color: purple;

            }

        }       

    }

}

But I just can't seem to get it working. Here is my config:

        // Whether to add a semicolon after the last value/mixin.
        "always-semicolon": true,

        // Set indent for code inside blocks, including media queries and nested rules.
        "block-indent": "    ",

        // Unify case of hexadecimal colors.
        "color-case": "lower",

        // Whether to expand hexadecimal colors or use shorthands.
        "color-shorthand": true,

        // Unify case of element selectors.
        "element-case": "lower",

        // Add/remove line break at EOF.
        "eof-newline": true,

        // Add/remove leading zero in dimensions.
        "leading-zero": false,

        // Unify quotes style.
        "quotes": "single",

        // Remove all rulesets that contain nothing but spaces.
        "remove-empty-rulesets": true,

        // Set space after `:` in declarations.
        "space-after-colon": " ",

        // Set space after combinator (for example, in selectors like `p > a`).
        "space-after-combinator": " ",

        // Set space after `{`.
        "space-after-opening-brace": "\n\n",

        // Set space after selector delimiter.
        "space-after-selector-delimiter": "\n",

        // Set space before `}`.
        "space-before-closing-brace": "\n\n",

        // Set space before `:` in declarations.
        "space-before-colon": " ",

        // Set space before combinator (for example, in selectors like `p > a`).
        "space-before-combinator": " ",

        // Set space before `{`.
        "space-before-opening-brace": " ",

        // Set space before selector delimiter.
        "space-before-selector-delimiter": "\n",

        // Set space between declarations (i.e. `color: tomato`).
        "space-between-declarations": "\n",

        // Whether to trim trailing spaces.
        "strip-spaces": false,

        // Whether to remove units in zero-valued dimensions.
        "unitless-zero": true,

        // Whether to align prefixes in properties and values.
        "vendor-prefix-align": false,

Where the above results in:

.mq-nest-test-no-mq {
    position : absolute;

    display : block;

    margin-top : 10px;

    color : @orange;

}

@media screen only and (max-width: 500px) {

    .mq-est-test-mq-outer {
        color : true;

    }

}

.mq-est-test-mq-inner {
    @media screen only and (max-width: 700px) {
        color : orange;
        @media screen only and (max-height: 200px) {

            .mq-est-test-mq-inner-nested {
                color : purple;

            }

        }

    }

}

Some help would be greatly appreciated :+1:

[gerbenvandijk]

@tonyganch would you mind taking a quick look at the above? Thanks :+1:

[loringdodge]

@gerbenvandijk Maybe check out https://github.com/csscomb/csscomb.js to see if now accommodates what you're looking for. This repo is for the sublime plugin only. Any CSS specific things are found in csscomb.js. Thanks