SCSS maps issue

[mrahhal]

Input

The code looked like this before beautification:

$theme-colors: (
  primary: $blue,
  secondary: $gray-600,
  success: $green,
  info: $cyan,
  warning: $yellow,
  danger: $red,
  light: $gray-100,
  dark: $gray-800
) !default;

Expected Output

The above code is correctly indented. So it should stay the same.

Actual Output

The code actually looked like this after beautification:

$theme-colors: ( primary: $blue,
secondary: $gray-600,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800) !default;

Environment

OS: Windows

Settings

{
  "end_with_newline": true,
  "max_preserve_newlines": 2,
  "preserve_newlines": true,
  "js": {
    "indent_with_tabs": true,
    "indent_size": 4
  },
  "css": {
    "indent_size": 2,
    "newline_between_rules": true,
    "selector_separator_newline": true,
    "space_around_combinator": true
  },
  "html": {
    "indent_size": 2,
    "unformatted": [],
    "wrap_attributes": "force-aligned"
  }
}

[fifn2]

@mrahhal @bitwiseman I'm having the same issue.

$mdc-typography-styles-body1: (
  font-size: 1.125rem,
  color: $g,
  // ggrey
);

becomes

$mdc-typography-styles-body1: (font-size: 1.125rem,
color: $g,
// ggrey
);

I'm kind of frustrated about this. I hope you add something about this.

[rowild]

I am having the same issue. I tried to use the preserve command, but that won't work either:

/* beautify preserve:start */
$inuit-config: (
  env: dev,
  healthcheck: false,
  debug: true,
);
/* beautify preserve:end */

This is reproducable on https://beautifier.io/.

I didn't find any hints, whether css uses a different notation for the preserve command. So I wonder: Am I doing something wrong?

[bitwiseman]

@rowild You're not doing anything wrong. Unfortunately, preserve hasn't been implemented for css yet. However, I just released 1.8.10-beta4 which supports ignore. Please give that a try.

[simzikov]

Is there a solution to this in 2019?

[bitwiseman]

@Simpleqode It seem people are interested someone implementing a solution. Any help would be appreciated.

[mrahhal]

So nothing on this yet? Been years, still seeing the same issue. I'm guessing this project doesn't really intend to support formatting scss in a good way and that I should look for alternatives for it.

[rowild]

@mrahhal Did you try

/* beautify ignore:start */
$inuit-config: (
  env: dev,
  healthcheck: false,
  debug: true,
);
/* beautify ignore:end */

I think that works fine, even though it means some manual formatting.

[rowild]

@bitwiseman I realise only today not to have answered to you - I am very sorry! Yes, your solution works fine! Thank you!

[mrahhal]

This worked! I would have hoped that beautify would simply understand the scss, but I guess it's fair that it doesn't. I realized that only css is being mentioned in the readme. In any case this will serve as a good workaround for now. Thank you @rowild!

[rowild]

@mrahhal Glad it helped you! All cudos to @bitwiseman , though! :-) Cheers and stay safe!

[mrahhal]

I'm not sure if I should keep this open, but I'll close this issue for now since it's already too old. I'm not sure if the SCSS issue in general is being tracked somewhere else or if there's just no plan to actually properly support SCSS.

[bitwiseman]

There is some support for SCSS and it is slowly being worked on.

This project is used by a lot of people but basically has one contributor at this point. So the speed which things happen is when I have time. Should anyone choose to come along and, you know, contribute this is still something that would be great to get implemented. Or I'll get to it when I can.

[damienfa]

Same problem with every comma separated list : https://github.com/beautify-web/js-beautify/issues/1799#issuecomment-881146391

[asphub]

This issue needs to addressed and fixed. VS Code leads me here to report the bug https://github.com/microsoft/vscode/issues/146351

This is the main reason for me to discontinue usage of beautifyjs for SCSS formatting and I am using SCSS formatter by Sibiraj. which is the best formatter for SCSS.

Name: SCSS Formatter Id: sibiraj-s.vscode-scss-formatter Description: A Visual Studio Code Extension to format SCSS Version: 2.4.1 Publisher: Sibiraj VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=sibiraj-s.vscode-scss-formatter

[intermediatech]

This issue was created on "25 Aug 2017" and is still not fixed yet. Why ??

[mhnaeem]

@bitwiseman I have added a PR related to this issue. It is not a full solution but it improves the formatting for some very basic cases of maps.

[mhnaeem]

Missing cases that still need handling:

Case 1: Input multiline but selector_separator_newline is false

// with option {"selector_separator_newline": false}

$theme-colors: (
  primary: $blue,
  secondary: $gray-600
);

Case 2: Maps inside rules

.element {
    $theme-colors: (
        primary: $blue,
        secondary: $gray-600
    );
}

Case 3: maps that have !default like statements at the end

$theme-colors: (
  primary: $blue,
  secondary: $gray-600
) !default;

[bitwiseman]

@intermediatech

This issue was created on "25 Aug 2017" and is still not fixed yet. Why ??

Because this project needs more contributors like @mhnaeem. Please feel free to join in.

[magnetikonline]

This is the main reason for me to discontinue usage of beautifyjs for SCSS formatting and I am using SCSS formatter by Sibiraj. which is the best formatter for SCSS.

It's a shame - as with VSCode I'm using the following settings for SCSS formatting and for me it's perfect in every aspect except these pesky maps 😄

"scss.format.enable": true,
"scss.format.newlineBetweenSelectors": false,
"scss.format.preserveNewLines": false,
"scss.format.spaceAroundSelectorSeparator": true,
"[scss]": {
  "editor.formatOnSave": true,
},

hopefully someday - but as a one-man team on this project, totally understandable it takes much time/effort to move things along 👍.