Js-beautify: 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.