Js-beautify: newline_between_rules support for Sass (enhancement)

[joseluisq]

Now newline_between_rules option in v1.5.5 is supported for CSS only https://github.com/beautify-web/js-beautify/pull/574
So, in Sass for nesting doesn't work.

Here my test.js file:

var fs = require('fs');
var beautify_css = require('js-beautify').css;

fs.readFile('test.scss', 'utf8', function(err, data) {
  if (err) {
    throw err;
  }

  console.log(beautify_css(data, {
    indent_size: 2,
    newline_between_rules: true
  }));
});

Output:

$ node test.js

.icons {
  padding: 0;
  li {
    display: inline-block;
  }
  a {
    display: block;
    color: #000;
  }
  a:hover {
    color: #ccc;
  }
}

I hope to add newline_between_rules support for Sass.
Regards.

[bitwiseman]

And what do you want it to look like?

[joseluisq]

Similar to CSS version https://github.com/beautify-web/js-beautify/pull/574
In general, one nesting level is enough.
Here an example:

// Icons
.icons {
  padding: 0;

  li {
    display: inline-block;
  }

  a {
    display: block;
    color: #000;
  }

  a:hover {
    color: #ccc;
  }
}

// Button
.button {
  &.primary {
    color: #4183c4;
  }

  &.primary:hover {
    color: lighten(#4183c4, 15%);
  }
}

[deepak8167]

Hi,
Is this work for scss rules.

.old_price {
@include GibsonRegular();
@include font-size(14);
color: #646464;
margin-left: 10px;
text-decoration: line-through;

.promovalue {
  @include GibsonRegular();
}

}

[echenley]

+1

[explorador]

+1

[chipcullen]

+1

[spacedawwwg]

+1

[spacedawwwg]

maybe an option like newline_between_nested_rules: true as it seems to be specifically an issue with nested?

} and ; would need to consider the rule for nested new lines

[Billskate]

+1, also for less

[ms-carterk]

+1

[nevace]

+1

[Jakobud]

I can confirm that this is indeed a problem only with the nested rules. Current with newline_between_rules: true this:

body {
  background-color: #FFF;

  > div {
    background-color: #AAA;
  }
}

.container {
  color: blue;
}

Becomes this:

body {
  background-color: #FFF;
  > div {
    background-color: #AAA;
  }
}

.container {
  color: blue;
}

And newline_between_rules: false this is the result:

body {
  background-color: #FFF;
  > div {
    background-color: #AAA;
  }
}
.container {
  color: blue;
}

So support for newlines between nested rules should be considered.

[danieloprado]

+1

[gligoran]

Any ETA on this thing?

[francislanglois]

+1

[pacochan]

+1

[jfily]

+1 :(

[Startcom]

+1

[zimmerboy]

Another +1

Sorry for the noise. I didn't know if another way to upvote this.

[gligoran]

@zimmerboy there's an "Add your reaction" button at the top right of every comment, which contains the +1 reaction (:+1:).

[patroza]

My workaround in beautify-css.js:

1. Replace newLine function:

        print.newLine = function(keepWhitespace, keepNewLine) {
            if (output.length) {
                if (!keepWhitespace && output[output.length - 1] !== '\n') {
                    print.trim();
                    if (keepNewLine) { output.push('\n'); }
                }

                output.push('\n');

                if (basebaseIndentString) {
                    output.push(basebaseIndentString);
                }
            }
        };

1. Change both newline_between_rules conditions and statements to:

                    if (newline_between_rules) {
                        print.newLine(false, true);
                    }

Note: This only takes care of newlines between rules, not rules after properties. Anyone some ideas on that?

[bitwiseman]

@sickboy - Cool, start a pull request, add some tests. Please feel free to move this forward.

[mrahhal]

Is this coming anytime soon? It's my only blocker for using beautify for sass.

[bitwiseman]

@mrahhal - The issue is nearly two years old. It seams @sickboy has done some work on this. Someone just needs to make a pull request with tests.

Maybe you'd like to do this? See CONTRIBUTING.md.

[mrahhal]

@bitwiseman unfortunately I don't have the experience with this kind of projects nor the time. But my question is, so is everyone either using plain css or just sticking with how the current formatting works? That's weird for a very old but easy to solve issue .

@sickboy are you on this? Maybe I'll tackle it after all if nobody's active on this. Apart from some weird behavior with "max_preserve_newlines", this is really the only thing missing that's completely preventing me from using beautify.

[zimmerboy]

I wonder if pull request #1117 (added preserve_newlines for css) will help with this.

[mrahhal]

@zimmerboy yes that seems to be a fix for the current issue, but a different kind I think.

[jorgeramirez]

Is #1117 going to be merged? It seems to address this issue too.

[bitwiseman]

@jorgeramirez - Just waiting for fixes to previous feedback.

[jorgeramirez]

@bitwiseman great!

[royduin]

Any updates?

[bitwiseman]

@royduin - please test with the latest release.

[stgogm]

It seems to work fine but there's a little issue with comments. I know Bootstrap SCSS is not a great example, but still.

This is how the code is formatted on the repo:

And this is after beautifying:

It works as expected but comments overlap with previous declaration, but if comments are formatted correctly, it works fine:

Again, it's nothing really important, but Bootstrap is widely used :confused:

[bitwiseman]

@stgogm
Please file a new issue.
Also, please include text, not images.

[stgogm]

@bitwiseman Okay, sorry. Just wanted to note that as it's not really an issue if you respect the SCSS linter rules.

[bitwiseman]

@stgogm - Cool, thanks for the info. 😄

[olets]

@stgogm while you have it set up, could you test the nested newline_between_rules issue? With

newline_between_rules: true

does your

fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
    &+fieldset {
        margin-top: $padding-large;
    }
}

become

fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;

    &+fieldset {
        margin-top: $padding-large;
    }
}

?

[stgogm]

Actually, it makes no difference:

Code as authored (without new line in between):

form {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  & + fieldset {
    margin-top: $padding-large;
  }
}

After beautify with "newline_between_rules": false:

form {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  &+fieldset {
    margin-top: $padding-large;
  }
}

After beautify with "newline_between_rules": true:

form {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  &+fieldset {
    margin-top: $padding-large;
  }
}

It just removed the space between the +.

js-beautify --version
1.6.12

[olets]

Thanks @stgogm! So nope @bitwiseman #1146 didn't fix this

[vvs]

Another example where "newline_between_rules" is not enough for SCSS:

$variable: #333;
div {
  display: none;
}

Formatting this SCSS doesn't add a new line between the variable and the div selector.

[dehghani-mehdi]

Is clear when this feature will be available?

[whxaxes]

Does it have any progress?

[bitwiseman]

@dehghani-mehdi @whxaxes
This feature is unassigned. It needs someone to implement it and add tests.

[giubatt]

+1

[RenaldasK]

+1

[martinsimonovski]

+1

[nerdmax]

+1

[ciel]

+1

[olets]

Please vote with a 👍 reaction to the initial post rather than +1 messages - that won't spam subscribers. Thanks!