Switch to Pretty-Diff for LESS support

[Glavin001]

See https://github.com/austincheney/Pretty-Diff

/cc #53 , #52

[Glavin001]

See Node.js support for Pretty-Diff: https://github.com/austincheney/Pretty-Diff#nodejs--commonjs--requirejs

[mcdonnelldean]

Delighted to see this! Thanks @Glavin001

[Glavin001]

See prettydiff/prettydiff#14 (comment) for how to use beautify mode.

[Glavin001]

@nojaf this is now working:

Before (Your Source)

                    a {
                        line-height: @headerHeight;

display: block;
                        padding: 0px 15px;
                        font-size: 16px;
                        button {
                            font-size: 16px;
                        }
                        &:link {
                            color: @white;

text-decoration: none;
                        }
                        &:visited {
                            color: @white;

                        }
                        &:hover {
                            color: @orange;

                        }
                        &.green {
                            color: @green;

&:hover {
                                color: @white;

background-color: @green;

                            }
                        }

After (Beautified with next version of Atom Beautify)

a {
    display: block;
    font-size: 16px;
    line-height: @headerHeight;
    padding: 0px 15px;
    button {
        font-size: 16px;
    }
    &:link {
        color: @white;
        text-decoration: none;
    }
    &:visited {
        color: @white;
    }
    &:hover {
        color: @orange;
    }
    &.green {
        color: @green;
        &:hover {
            background-color: @green;
            color: @white;
        }
    }

@mcdonnelldean hope this works for you as well.

[nojaf]

Great work, thank you! Any idea when this fix will be updated in the package manager?

[Glavin001]

This should already be released about 16 hours ago (when I fixed it). Version 0.4.1 of atom beautify.

[nojaf]

Hmm, sorry to say but it looks worse actually.
Before:

After:

I double checked and I'm on 0.4.1, do I need some other package in order for this to work?
I'm using Atom 0.120.0 on Window 8.1

the file I'm using:

// main: style.less
@import (reference)"variables.less";
@import (reference)"mixins.less";

.modal {
      position: fixed;
    height: 100%;
    width: 100%;
    background-color: fade(@black, 70%);
    z-index: 10;
    opacity: 0;
    display: none;

    .innerModal {
        margin: auto;
            background-color: @white;
        overflow: hidden;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);

        .fa {
            float: right;
            color: @white;
            background-color: firebrick;
            padding: 5px 7px;
            border-radius: 20px;

            &:hover {
                background-color: lighten(@black, 50%);
                cursor: pointer;
            }

            &:active {
                background-color: lighten(@black, 25%);
            }
        }
    }

    &.modal-2text {
        .innerModal {
            width: @container-width;
            margin-top: 50px;
            height: 75%;
            padding: 10px 25px;
            background-color: gainsboro;
            border-radius: 4px;

            h2 {
                margin: 0px 0px 7px 0px;
            }

            div {
                height: 70%;
                overflow-y: scroll;
                background-color: @white;
                padding: 15px;
                border-radius: 4px;
            }

            .large-cta {
                margin-top: 25px;
            }
        }
    }
}

#modal-video {
    .innerModal {
        left: 10%;
        margin-top: 30px;
        width: 1000px;
        background-color: lighten(@black, 25%);

        iframe {
            width: 600px;
            height: 340px;
            margin: 2% auto;
        }
        //container
        > div {
            text-align: center;

            a {
                .styleLinks(@white, darken(@white, 10%));
                padding: 5px;
                text-transform: uppercase;

                &:hover {
                    background-color: fade(@white, 15%);
                }

                &:active {
                    background-color: fade(@white, 30%);
                }
            }

            h3 {
                color: @white;
                font-size: 3em;
                margin: 20px auto;
            }

            button {
                margin-bottom: 50px;
            }
        }
    }
}

.slideIn {
    .animation(SlideIn, 0.5s);
}

@-webkit-keyframes SlideIn {
    0% {
        .transform(translateY(-100%));
    }

    100% {
        .transform(translateY(0px));
    }
}

.fadeIn {
    display: block;
    .animation(FadeIn, 0.5s);
}

@-webkit-keyframes FadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.slideOut {
    .animation(SlideOut, 0.5s);
}

@-webkit-keyframes SlideOut {
    0% {
        .transform(translateY(0%));
    }

    100% {
        .transform(translateY(-100%));
    }
}

.fadeOut {
    .animation(FadeOut, 0.5s);
}

@-webkit-keyframes FadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

[Glavin001]

Can you try that example source code with the pretty diff website?
Atom beautify has many dependencies that handle the actual beautification. Js-beautify was handling the LESS before however there were issues and now it has been switched to pretty-diff. If pretty-diff is not working then I will need another package for beautifying less. However pretty-diff came highly recommended so I hope we can work this out.

I am currently on vacation, and was on a train and implemented the switched to pretty diff while I had a spare few minutes but it's unlikely I will have much more time. And if I do I will need to know what package to implement and that had been tested by actual LESS users like yourselves. Please test around with the pretty-diff website and find other packages to try if it does not work. I'll try and check back and hopefully we have a package that can handle LESS properly.

[nojaf]

The same result with the pretty diff website. I'll look for some less beautifiers.
Enjoy your vacation first, we'll pick this up later.
Cheers man!

[seaside98]

Haha, I didn't even mean to find the problem, but it seems I did. I pasted that source in to the website and got the same result as you. However, when I click on the Beautify Report, it shows me a popup saying:

Execution time: 0.007 seconds

Language is set to auto. Presumed language is javascript.

30 instances of missing semicolons counted.

0 unnessary instances of the keyword new counted.

PrettyDiff is assuming the language is javascript. I don't know if there is a way to force the correct language, but I would assume there is.

[Glavin001]

Spot on @seaside98. I just needed to change the lang from less to css.

Before (Original source code)

// main: style.less
@import (reference)"variables.less";
@import (reference)"mixins.less";

.modal {
      position: fixed;
    height: 100%;
    width: 100%;
    background-color: fade(@black, 70%);
    z-index: 10;
    opacity: 0;
    display: none;

    .innerModal {
        margin: auto;
            background-color: @white;
        overflow: hidden;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);

        .fa {
            float: right;
            color: @white;
            background-color: firebrick;
            padding: 5px 7px;
            border-radius: 20px;

            &:hover {
                background-color: lighten(@black, 50%);
                cursor: pointer;
            }

            &:active {
                background-color: lighten(@black, 25%);
            }
        }
    }

    &.modal-2text {
        .innerModal {
            width: @container-width;
            margin-top: 50px;
            height: 75%;
            padding: 10px 25px;
            background-color: gainsboro;
            border-radius: 4px;

            h2 {
                margin: 0px 0px 7px 0px;
            }

            div {
                height: 70%;
                overflow-y: scroll;
                background-color: @white;
                padding: 15px;
                border-radius: 4px;
            }

            .large-cta {
                margin-top: 25px;
            }
        }
    }
}

#modal-video {
    .innerModal {
        left: 10%;
        margin-top: 30px;
        width: 1000px;
        background-color: lighten(@black, 25%);

        iframe {
            width: 600px;
            height: 340px;
            margin: 2% auto;
        }
        //container
        > div {
            text-align: center;

            a {
                .styleLinks(@white, darken(@white, 10%));
                padding: 5px;
                text-transform: uppercase;

                &:hover {
                    background-color: fade(@white, 15%);
                }

                &:active {
                    background-color: fade(@white, 30%);
                }
            }

            h3 {
                color: @white;
                font-size: 3em;
                margin: 20px auto;
            }

            button {
                margin-bottom: 50px;
            }
        }
    }
}

.slideIn {
    .animation(SlideIn, 0.5s);
}

@-webkit-keyframes SlideIn {
    0% {
        .transform(translateY(-100%));
    }

    100% {
        .transform(translateY(0px));
    }
}

.fadeIn {
    display: block;
    .animation(FadeIn, 0.5s);
}

@-webkit-keyframes FadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.slideOut {
    .animation(SlideOut, 0.5s);
}

@-webkit-keyframes SlideOut {
    0% {
        .transform(translateY(0%));
    }

    100% {
        .transform(translateY(-100%));
    }
}

.fadeOut {
    .animation(FadeOut, 0.5s);
}

@-webkit-keyframes FadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

After (Beautified using lang = 'css')

// main: style.less;
@import (reference)"mixins.less";
@import (reference)"variables.less";
.modal {
    background-color: fade(@black, 70%);
    display: none;
    height: 100%;
    opacity: 0;
    position: fixed;
    width: 100%;
    z-index: 10;
    .innerModal {
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        background-color: @white;
        margin: auto;
        overflow: hidden;
        transform: translateY(-100%);
        .fa {
            background-color: firebrick;
            border-radius: 20px;
            color: @white;
            float: right;
            padding: 5px 7px;
            &:hover {
                background-color: lighten(@black, 50%);
                cursor: pointer;
            }
            &:active {
                background-color: lighten(@black, 25%);
            }
        }
    }
    &.modal-2text {
        .innerModal {
            background-color: gainsboro;
            border-radius: 4px;
            height: 75%;
            margin-top: 50px;
            padding: 10px 25px;
            width: @container-width;
            h2 {
                margin: 0px 0px 7px;
            }
            div {
                background-color: @white;
                border-radius: 4px;
                height: 70%;
                overflow-y: scroll;
                padding: 15px;
            }
            .large-cta {
                margin-top: 25px;
            }
        }
    }
}
#modal-video {
    .innerModal {
        background-color: lighten(@black, 25%);
        left: 10%;
        margin-top: 30px;
        width: 1000px;
        iframe {
            height: 340px;
            margin: 2% auto;
            width: 600px;
        }
        //container > div {
            text-align: center;
            a {
                .styleLinks(@white, darken(@white, 10%));
                padding: 5px;
                text-transform: uppercase;
                &:hover {
                    background-color: fade(@white, 15%);
                }
                &:active {
                    background-color: fade(@white, 30%);
                }
            }
            h3 {
                color: @white;
                font-size: 3em;
                margin: 20px auto;
            }
            button {
                margin-bottom: 50px;
            }
        }
    }
}
.slideIn {
    .animation(SlideIn, 0.5s);
}
@-webkit-keyframes SlideIn {
    0em {
        .transform(translateY(-100%));
    }
    100% {
        .transform(translateY(0px));
    }
}
.fadeIn {
    .animation(FadeIn, 0.5s);
    display: block;
}
@-webkit-keyframes FadeIn {
    0em {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.slideOut {
    .animation(SlideOut, 0.5s);
}
@-webkit-keyframes SlideOut {
    0em {
        .transform(translateY(0%));
    }
    100% {
        .transform(translateY(-100%));
    }
}
.fadeOut {
    .animation(FadeOut, 0.5s);
}
@-webkit-keyframes FadeOut {
    0em {
        opacity: 1;
    }
    100% {
        display: none;
        opacity: 0;
    }
}

[Glavin001]

Published as 0.4.2

[nojaf]

Works as a charm. Thanks!

[Glavin001]

Glad to hear it :). Enjoy everyone! Let me know if there is anything else.

[Glavin001]

Add support for:

• indent_size
• indent_character

Looks like indentation options can be set, see prettydiff/prettydiff#21
insize => indent_size, etc.