Js-beautify: Add or preserve empty line between CSS rules

Created on 20 May 2014  ·  16Comments  ·  Source: beautify-web/js-beautify

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;
}
css enhancement

Most helpful comment

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.

All 16 comments

+1

+1

+1

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.

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');
        };

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

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
}

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

As @bitwiseman says this enhancement is covered at https://github.com/beautify-web/js-beautify/pull/574 pull request.
Please check it out and close this issue.

Waiting for the next version..

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

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.

@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.

has this been fixed?

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

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.

Was this page helpful?
0 / 5 - 0 ratings