js-beautify
js-beautify copied to clipboard
Beautifier wrap inline comments near css rules
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.
Anyone that had the same problem?
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.
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.