Beautify CSS - Bug with indent character (indent_char)

[yvan-sraka]

Hi,

I use Atom Beautify 0.20.1, in my preferences, Css indent size is set to 4.

When I Beautify this file:

$ cat -t test.css
.test {
^Idisplay:none;
}

I get this:

$ cat -t test.css
.test {
^I^I^I^Idisplay: none;
}

I'd rather get this:

$ cat -t test.css
.test {
    display: none;
}

Or just:

$ cat -t test.css
.test {
^Idisplay: none;
}

Thanks,
Yvan

[Glavin001]

Check your CSS Indent Char ( https://github.com/Glavin001/atom-beautify/blob/master/lib/language-options.coffee#L83 ). It should default to a space character, however maybe there is a setting that has been changed.

[Glavin001]

I just noticed the code says css_indent_Char when it should be css_indent_char. This may be causing the problem with js-beautify. Let me know if you are able to resolve this by changing the CSS Indent Char settings, however I will also look into this and see if it's a bug / typo. Thanks

[yvan-sraka]

The CSS Indent Char parameter is set to Default, change it does not affect the results of my tests.

[Glavin001]

Do you have a .jsbeautifyrc file? here's an example https://github.com/Glavin001/atom-beautify/blob/master/examples/simple-jsbeautifyrc/.jsbeautifyrc or nested like https://github.com/Glavin001/atom-beautify/blob/master/examples/nested-jsbeautifyrc/.jsbeautifyrc_json

I believe the bug is that the Atom Package option is css_indent_Char and not css_indent_char and my .jsbeautifyrc also uses indent_char for css so I think it is why it works for me. I recommend having a .jsbeautifyrc and I'll push a fix for the Package Settings if the .jsbeautifyrc works for you.

[yvan-sraka]

My current .jsbeautifyrc is:

$ cat /Users/Yvan/.atom/packages/atom-beautify/.jsbeautifyrc
{
  "indent_size": 2,
  "indent_char": " ",
  "indent_level": 0,
  "indent_with_tabs": false,
  "preserve_newlines": true,
  "max_preserve_newlines": 2,
  "jslint_happy": true
}

[Glavin001]

Yeah that's one of mine, however what is yours? And if you do not have one, could you create one and test beautifying your CSS with it?

[yvan-sraka]

Yes (Sorry, I just forgot to move it in my home folder), it works now:

$ cat -t test.css 
.test {
  display: none;
}

[Glavin001]

Okay, then it has been confirmed that typo is the culprit. Publishing in a few minutes.

[Glavin001]

Published to v0.20.2

You can now set the css indent char setting in the Atom Beautify package settings and it will translate to css_indent_char which will apply as indent_char for the CSS beautify of js-beautifier. For more options see https://github.com/beautify-web/js-beautify and https://github.com/Glavin001/atom-beautify/blob/v0.20.2/lib/language-options.coffee#L81 and I strongly recommend using a .jsbeautifyrc (supports JSON or YAML).

Thanks for using Atom Beautify! Enjoy.