Formatting LESS re-writes LESS...

[phillip-haydon]

Just tried this package out, before formatting:

section#photo-details {
    width: 1140px;
    margin: 60px auto 70px auto;
}

After

section#photo-details {
    margin : 60px auto 70px;
width  : 1140px;
}

See how it removed the auto on the margin... Don't care if its valid or not, this library formats code does it not, not rewrites it for me...

Also it seems to be completely broken with LESS, as you can see it left-aligned my width.

Other issues like this occur:

    div.photo-view {
        text-align: center;
        figure {
            box-shadow: 0 0 3px 1px rgba(0,0,0,0.75)
;
            display   : inline-block;
            margin    : 0 0 60px;
            padding   
: 0;
            img {
                display: block;
            }
        }

    }

A complete mess.

This is using the latest version 0.6.2

/uninstalled

[Glavin001]

Don't care if its valid or not, this library formats code does it not, not rewrites it for me...

Yeah that looks terrible. Valid or not, I don't accept that.

Also it seems to be completely broken with LESS, as you can see it left-aligned my width.

That is a mess.

---

LESS support appears to be a major problem: there are not really any solid LESS beautifiers available.
I've recently changed from js-beautify CSS which supports LESS, to using PrettyDiff, and am now looking for another alternative, however PrettyDiff came highly recommended.

There are a quite few LESS issues for Atom Beautify: https://github.com/Glavin001/atom-beautify/issues?q=less

If you find any other LESS beautifies that DO work for you, please let me know so I can look into migrating from PrettyDiff.

[phillip-haydon]

At the moment I'm using Auto-Indent (which is misleading since it doesn't actually auto indent) which fixe the issue I have.

But I'm fighting keybindings with it :(

[Glavin001]

I have updated Pretty-Diff dependency from ^1.0.23 to ^1.2.1 and now try beautifying:

Before:

section#photo-details {
    width: 1140px;
    margin: 60px auto 70px auto;
}

    div.photo-view {
        text-align: center;
        figure {
            box-shadow: 0 0 3px 1px rgba(0,0,0,0.75)
;
            display   : inline-block;
            margin    : 0 0 60px;
            padding
: 0;
            img {
                display: block;
            }
        }

    }

After:

section#photo-details {
  margin: 60px auto 70px;
  width : 1140px;

}
div.photo-view {
  text-align: center;
  figure {
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.75);
    display   : inline-block;
    margin    : 0 0 60px;
    padding   : 0;
    img {
      display: block;
    }
  }
}

Will be publishing soon. Hope this works for you :).

[Glavin001]

Published to v0.8.1

[phillip-haydon]

👍 awesome stuff

[razvanz]

What options need to be used to get the values of the proprieties aligned like this?

    box-shadow: 0 0 3px 1px rgba(0,0,0,0.75);
    display   : inline-block;
    margin    : 0 0 60px;
    padding   : 0;