Newlines being added before selectors in SCSS/CSS

[thatjeeb]

• Mac OS 10.13.5
• VS Code Version: 1.26.1
• beautify Version: 1.4.2

Code Example: I've added messy indentation to make the example outputs clear

$color-variable:    #000;
.offers-table {
    margin: 0 auto;
  .table-row {
margin: 0 auto;
  }
  .table-cell {
           margin: 0 auto;
  }
}

Provide the settings you use: VS Code:

{
    "terminal.integrated.shell.osx": "zsh",
    "workbench.startupEditor": "newUntitledFile",
    "editor.minimap.enabled": true,
    "files.autoSave": "off",
    "editor.tabSize": 2,
    "telemetry.enableTelemetry": false,
    "window.zoomLevel": 0,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "files.associations": {
        ".jsbeautifyrc": "jsonc"
    }
}

.jsbeautifyrc

none

Action performed

Format javascript file with HookyQR.beautifyFile command.

Expected results

Previously when I would format a scss file, none of the css selectors would have a new line added before them, so the code above would format to the below:

$color-variable: #000;
.offers-table {
  margin: 0 auto;
  .table-row {
      margin: 0 auto;
  }
  .table-cell {
      margin: 0 auto;
  }
}

Actual results

Within the last day it seems something has changed, now whenever I format using beautify, my css selectors have a new line added before them. So when I format the code example from above, it looks like this:

$color-variable: #000;

.offers-table {
  margin: 0 auto;

  .table-row {
      margin: 0 auto;
  }

  .table-cell {
      margin: 0 auto;
  }
}

Comments

And this is going to cause problems with git comparisons for the projects I'm on at work, as none of the files have new lines between the css rules and I dont want to be adding this. I've tried coming up with and adding variations of "newline_between_rules" to the vscode settings to prevent this but nothing works. I want to be able to add something like "css.format.newline_between_rules": false, to my vscode user settings. I tried adding a jsbeautifyrc file to my home directory or adding beautify.config options to my vscode user settings, but this then forces me to use one tabSize only, and one of the things I like and need of beautify is that it respects the tabSize of each file (different scss files have different indentations within the same project...)

[bitwiseman]

@thatjeeb I think "css.format.newline_between_rules": false is the correct.

But if you also preserve_newlines it will leave the empty lines there once they have been added.

You might need to set "css.format.newline_between_rules": false and then reset your file to a clean state and test it again.

[dimashlegel]

@thatjeeb Did you fix this?

[HookyQR]

From your settings, this looks like it's fixed.

[thatjeeb]

Hi

Apologies @HookyQR and @bitwiseman for just not replying for ages, been so blind sided at work haven't had time to come back to this.

Unfortunately, my issue still remains, so I would be grateful if this could be re-opened. I tried changing my vscode settings to this, but it has had no effect:

{
    "terminal.integrated.shell.osx": "zsh",
    "workbench.startupEditor": "newUntitledFile",
    "editor.minimap.enabled": true,
    "files.autoSave": "off",
    "editor.tabSize": 2,
    "telemetry.enableTelemetry": false,
    "window.zoomLevel": 0,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "files.associations": {
        ".jsbeautifyrc": "jsonc"
    },
    "css.format.newline_between_rules": false,
    "css.format.preserve_newlines": false
}

[HookyQR]

I assume you're running beautify and selecting CSS. This issues is the first one that has a test specifically for it, so I'm positive it works: https://github.com/HookyQR/VSCodeBeautify/blob/master/test/issues.test.js#L6 You should be on version 1.4.4 of beautify.

[HookyQR]

Ah. The settings were being carried over from another test. Add:

{
    "newline_between_rules": false
}

Either as a .jsbeautifyrc file or as the value of "beautify.config" in your VS Code settings file.

[thatjeeb]

I've tried that, and that does fix the issue of not adding new lines; but the problem then, is it beautifies all my Sass files to one type of indentation.

I work with a lot of repos at work, unfortunately all with different indentation standards, some 2, some 4. I can't set Beautify to only one type of indentation because then I'll start changing all the indentation in these established repos. One reason beautify was great for me is it would format the indentation of my Sass files to whatever the detected indentation is.

Is there a jsbeautifyrc setting to format with detected indentation? Because I've googled and couldn't find such a thing.

What confuses me, is previously Beautify never used to add new lines in my nested sass, it's only recently started happening but I can't figure out why.

I have updated to 1.4.4, issue still occurs

[bitwiseman]

@thatjeeb If you have newlines_between_rules it is reasonable to expect that newlines will be added between nested rules as well.

[thatjeeb]

@bitwiseman I don't have newlines_between_rules set anywhere, which is why I don't understand why this is happening. Is it coming from vscode beautify, or from vscode itself?

Yes I can manually set newlines_between_rules to false but that causes my indentation issue to occur. I can't seem to change newlines_between_rules without the rest of my beautify settings changing as well, I just want to change this one property without affecting everything else.

[bitwiseman]

@thatjeeb I would expect that you should be able to change that one property without loosing autodetect, but there are multiple layers of settings being pulled in. I'm not sure how the plugin auto-detects indentation (or if it uses some existing setting pulled from the editor).

Do the different projects you're working with have settings files checked in that define their code style?