Js-beautify: css-beautify inserts extra newlines before comments

[adongy]

Description

This is the default template for bug reports, if you have a more general
issue, question, or request, you may ignore this template and write freeform.

NOTE:

• Do not include screenshots! This library is a text processor, we need text inputs and outputs for debugging and fixing issues.
• Check the list of open issues before filing a new issue.

Input

The code looked like this before beautification:

html {}


/* comment */

Expected Output

The code should have looked like this after beautification:

html {}


/* comment */

Actual Output

The code actually looked like this after beautification:

html {}



/* comment */

Steps to Reproduce

Environment

OS: Debian 8 Jessie

Settings

Example:

{
    "indent_size": 4,
    "indent_char": " ",
    "indent_level": 0,
    "indent_with_tabs": false,
    "preserve_newlines": true,
    "max_preserve_newlines": 10,
    "jslint_happy": false,
    "space_after_anon_function": false,
    "brace_style": "collapse,preserve-inline",
    "keep_array_indentation": false,
    "keep_function_indentation": false,
    "space_before_conditional": true,
    "break_chained_methods": false,
    "eval_code": false,
    "unescape_strings": false,
    "wrap_line_length": 0
}

I would expect that css-beautify puts a fixed number of newlines before the comment. Instead, by running
css-beautify -f file.css -r repeatedly, there's an increasing number of newlines before the comment.

[adongy]

After a bit of pinpointing, on v1.6.9 it works properly, and on v1.6.10 it's broken.

[bitwiseman]

@adongy - That will be helpful to whoever fixes this.

[bitwiseman]

Note: on http://jsbeautifier.org/ this:

<style>
        html {}

        /* comment */
</style>

Becomes:

<style>
        html {}
        /* comment */
</style>

[taoliujun]

I try format vue file in vscode.
The code is border: 1px solid #ddd;/*no*/ for ignore px2rem, but after format code, The code becomes:

border: 1px solid #ddd;    
/*no*/

it add new line before /no/ comment and it will not work for ignore px2rem.

help me.

[bitwiseman]

@sandrosc believed this introduced the issue: https://github.com/beautify-web/js-beautify/commit/262a3e792327562d699343f6e56f66515eb8225b#diff-e6bf79593be5e3c81e776945fac0fddaR497

Thanks @sandrosc. Please submit a PR to fix this and add tests. You will be loved by many.

[aszx0413]

It keeps adding new line between css rule and comments

[CTimmerman]

Not fixed in latest:

>npm install js-beautify
+ [email protected]
added 28 packages from 21 contributors and audited 125 packages in 1.954s
found 0 vulnerabilities

>echo h1{color:red;/*comment*/} > test.css

>js-beautify -f test.css
h1 {
  color: red;
  /*comment*/
}
>type .jsbeautifyrc
{
        "brace_style": "collapse,preserve-inline",
        "break_chained_methods": false,
        "eval_code": false,
        "extra_liners": [],
        "indent_char": " ",
        "indent_level": 0,
        "indent_size": 2,
        "indent_with_tabs": false,
        "jslint_happy": true,
        "keep_array_indentation": false,
        "keep_function_indentation": false,
        "max_preserve_newlines": 3,
        "newline_between_rules": false,
        "preserve_newlines": true,
        "space_before_conditional": true,
        "unescape_strings": false,
        "wrap_line_length": 0
}

css.replace(/;\n\s*\/\*/gs, '; /*') should fix that.

[bitwiseman]

@CTimmerman
Please open a new issue, not the same as this one.