Js-beautify wrap inline comments near css rules

Question

I have a small issue with js beautify when I try to format my scss codebase.

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 js-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 ugly behavior is independent from the configuration file, you can notice it with any configuration.

Answer 1

Ok, I guessed a small workaround for that.

In my gulpfile.js I wrote (thank you gulp-replace!):

.pipe(replace(";\n /* ", "; /* "))

This, during the SCSS gulp compilation, will fix the problem caused by js-beautify. It will replace the "\n" (line break) with a " " (space).

Hope it help!

---