Js-beautify: SCSS maps issue

Created on 25 Aug 2017 · 12Comments · Source: beautify-web/js-beautify

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"
  }
}

css templating bug

Source

mrahhal

👍2

All 12 comments

@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.

fifn2 on 9 Nov 2018

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?

rowild on 9 Jan 2019

@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.

bitwiseman on 10 Jan 2019

👍1

Is there a solution to this in 2019?

simzikov on 5 Nov 2019

👍1

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

bitwiseman on 6 Nov 2019

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.

mrahhal on 16 Apr 2020

@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 on 16 Apr 2020

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

rowild on 16 Apr 2020

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!

mrahhal on 16 Apr 2020

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

rowild on 16 Apr 2020

👍1

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.

mrahhal on 16 Apr 2020

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.

bitwiseman on 17 Apr 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings