Add or preserve empty line between CSS rules

[drewhamlett]

Forgive me if this has been asked before but is there a way to keep spacing between CSS rules when formatting?

.login {
    margin-top: 30px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.7);
}

.login.btn {
    border-radius: 0;
    background-color: #5C6166;
    border-color: #4a4a4a;
}

To:

.login {
    margin-top: 30px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.7);
}
.login.btn {
    border-radius: 0;
    background-color: #5C6166;
    border-color: #4a4a4a;
}

[noducks]

+1

[ThanosSamarinas]

+1

[redrbrt]

+1

[Atid-Gharbi]

There is an option called "end_with_newline", I thought this adds a new line between blocks, but it just puts an empty line at the end of the file :-/

I hope this gets fixed, I love beautify but this issue (as silly as this may sound) is a deal-breaker for me.

[Atid-Gharbi]

I have fixed this, at least for simple CSS documents, by adding a new line after every }

go to \Packages\HTML-CSS-JS Prettify\scripts\node_modules\js-beautify\js\lib\beautify-css.js
Find this section of code:

print["}"] = function (ch) {
            print.newLine();
            output.push(ch);
            print.newLine();
        };

and change it to

print["}"] = function (ch) {
            print.newLine();
            output.push(ch);
            print.newLine();
            output.push('\n');
        };

[bitwiseman]

@Atid-G, that's great! Please provide a pull request with tests (and python port).

[malexandre]

I think the fix from @Atid-G will not be sufficient. In a nested property, we don't need to add a new line after the closing bracket. I know that's for less/scss, but I think this is also used to beautify thos languages.

Example :

.rule-1 {
    display: block;

    .rule-2 {
        float: left;
    } // New line needed after this bracket

    .rule-3 {
        display: none;
    } // No new line needed
}

[bitwiseman]

@drewhamlett, I just took a merge, but I'm not sure it fully addresses what you wanted here. Could you take a look?

[joseluisq]

As @bitwiseman says this enhancement is covered at #574 pull request.
Please check it out and close this issue.

Waiting for the next version..

[bitwiseman]

Okay, I'm going to call this good and we can reopen if it turn out not to be so.

[nevace]

As @malexandre said, would it be possible to add new lines within nested properties? Everything is looking bunched up in sass and the linter is complaining about it too. I have media queries nested in a lot of properties so it's quite hard to read.

[bitwiseman]

@nevace, it sounds like you're talking about a different issue. Please open a new issue with example of input, current output, and desired output. Please include any pertinent settings.

[evanjmg]

has this been fixed?

[joseluisq]

has this been fixed?

#574

[alejandroiglesias]

@bitwiseman: I opened the new ticket myself since I think it's highly relevant #1258.

[ciel]

This would be so great. I wish js-beautify obeyed sass-lint more explicitly, but this is the only feature that's giving me a lot of trouble.