[REQUEST] Space before new rule

[Shnilj]

I really like this plugin but I would LOVE an option to add a newline before each new rule. I find that it would add to the readability of the css.

Thanks for the awesome plugin though!

[lightningtgc]

Thanks , @Shnilj . This plugin just follow this css coding style. It doesn't require a newline before each new rule. However, we will discuss it, and push this new feature to the plugin.

[Shnilj]

Thanks for your response. I know it follows a css coding style, but having the option to add a newline before the selecter would help with readability. For me at least.

Thanks for your consideration!

[lightningtgc]

I will add another custom config file to adapt some special case like a newline as soon as possible.

Thanks for your suggestion.

[lightningtgc]

Hi @Shnilj .

I have published a new version v0.4.0 for the custom config which can handle some special case. You can change the value of block-newline In the file cssorder.sublime-settings.

It will add a newline for every block ,and remove unnecessary newline.

I hope you can have a try. If you have any question, please tell me here.

Thank you! :smile:

[Shnilj]

Thanks for this! It works, but not perfectly. Sometimes, instead of adding the space before the selector, it adds it before the closing bracket.

If this could be fixed, that would be awesome. Thanks for the work so far!

[lightningtgc]

Could you give me some example code? Thanks.

[Shnilj]

Sure. Take for example this piece of Sass:

.test {
    font-size: 2em;

    background-color: #fff;

    .testCase {
        font-size: 3em;

        p {
            color: #CCC;
            font-weight: bold;
        }
    }

    .anotherTestCase {
        color: #000;

        @extend .testCase;
    }
}

If I let CSSOrder do its thing on it it gives me the following:

.test {
    font-size: 2em;

    background-color: #fff;
    .testCase {
        font-size: 3em;
        p {
            font-weight: bold;

            color: #ccc;
        }

    }
    .anotherTestCase {
        color: #000;

        @extend .testCase;
    }
}

As you can see, the space that was supposed to be above .anotherTestCase is now above the closing bracket of .testCase.

[lightningtgc]

So I'm not sure what's your target code? I guess it looks like:

.test {
    font-size: 2em;

    background-color: #fff;
    .testCase {
        font-size: 3em;
        p {
            font-weight: bold;

            color: #ccc;
        }
    }

    .anotherTestCase {
        color: #000;

        @extend .testCase;
    }
}

I have make it work and commited it. You can download the zip and make sure is it ok?

Thanks.

[Shnilj]

My target is as follows:

.test {
    font-size: 2em;

    background-color: #fff;

    .testCase {
        font-size: 3em;

        p {
            font-weight: bold;

            color: #ccc;
        }
    }

    .anotherTestCase {
        @extend .testCase;

        color: #000;
    }
}

With the spaces before each selector and the Sass specific stuff like '@extend' and '@include' on top...