js-beautify icon indicating copy to clipboard operation
js-beautify copied to clipboard

Beautifier wrap inline comments near css rules

Open ghost opened this issue 4 years ago • 3 comments

Beautifier wrap inline comments near css rules

Input

The code looked like this before beautification:

.hero-about {
  background: linear-gradient(rgba(0, 0, 0, .4),
      rgba(0, 0, 0, .6)), url("../../images/backgrounds/team.png") center/cover; /* 1 */
  height: .1rem; /* 2 */
  min-height: 100vh;
}

Expected Output

The code should have looked like this after beautification (same):

.hero-about {
  background: linear-gradient(rgba(0, 0, 0, .4),
      rgba(0, 0, 0, .6)), url("../../images/backgrounds/team.png") center/cover; /* 1 */
  height: .1rem; /* 2 */
  min-height: 100vh;
}

Actual Output

The code actually looked like this after beautification, you can note that beautify wrap the inline comments, and obviously I don't want this ugly behavior.

.hero-about {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url("../../images/backgrounds/team.png") center/cover;
  /* 1 */
  height: .1rem;
  /* 2 */
  min-height: 100vh;
}

Steps to Reproduce

Simply copy the css code, and try to run beautify no configuration is needed

Environment

OS: Windows 10 Home 6/03/2020 18363.720


Settings

{
   "indent_size": 2, 
"end_with_new_line": true
}

Please note: This behavior is independent from the configuration file, you can notice with any configuration.

ghost avatar Mar 19 '20 12:03 ghost

Anyone that had the same problem?

ghost avatar Mar 27 '20 12:03 ghost

Hi guys!

I have similar behavior than @Unknow-max, but in my case, the script don´t beautifies the multiline comments, by example:

/* --- line 1 of comment --- --- line 2 of comment --- line 3 of comment */

Is not converted to

`

/* --- line 1 of comment --- --- line 2 of comment --- --- line 3 of comment */

`

There is any way to add that behavior to the script?

Thanks in advance.

lncproducciones avatar Apr 23 '20 03:04 lncproducciones

I can confirm the behavior described by OP is still occurring as of v1.15.1.

This code

.button {
  display: inline-block; /* [1] */
}

changes to this on beautification:

.button {
  display: inline-block;
  /* [1] */
}

whereas the expected outcome would be to preserve the inline comment.

templeman avatar Mar 27 '24 00:03 templeman