Switch to Pretty-Diff for LESS support #54

Glavin001 · 2014-07-28T21:01:52Z

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

/cc #53 , #52

Glavin001 · 2014-07-28T22:29:26Z

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

mcdonnelldean · 2014-07-29T10:38:00Z

Delighted to see this! Thanks @Glavin001

Glavin001 · 2014-08-01T19:40:12Z

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

Glavin001 · 2014-08-02T00:02:19Z

@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 · 2014-08-02T10:38:47Z

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

Glavin001 · 2014-08-02T15:58:20Z

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

nojaf · 2014-08-02T16:10:07Z

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 · 2014-08-02T16:17:43Z

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 · 2014-08-02T16:24:39Z

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 · 2014-08-02T22:05:55Z

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 · 2014-08-03T19:31:01Z

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

The `lang` option was incorrectly set to `less`, it should have been (now is) set to `css`.

Glavin001 · 2014-08-03T19:35:49Z

Published as 0.4.2

nojaf · 2014-08-03T19:48:31Z

Works as a charm. Thanks!

Glavin001 · 2014-08-03T19:56:33Z

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

Glavin001 · 2014-08-03T20:51:47Z

Add support for:

indent_size
indent_character

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

See #54. Use indent_size and indent_character options.

Glavin001 added enhancement labels Jul 28, 2014

Glavin001 self-assigned this Jul 28, 2014

Glavin001 added this to the v1.0.0 milestone Jul 28, 2014

Glavin001 closed this as completed in 5bff9eb Aug 2, 2014

Glavin001 added a commit that referenced this issue Aug 3, 2014

Fixes #54. LESS beautifier using PrettyDiff now fixed.

010863f

The `lang` option was incorrectly set to `less`, it should have been (now is) set to `css`.

Glavin001 mentioned this issue Aug 3, 2014

Improve SASS Support by switching to Pretty-Diff #44

Closed

Glavin001 added a commit that referenced this issue Aug 4, 2014

Closes #44. Switch to using Pretty Diff for SASS, as well.

1f0fb9c

See #54. Use indent_size and indent_character options.

cooljl31 mentioned this issue Jun 27, 2023

[Snyk] Security upgrade editorconfig from 0.13.3 to 1.0.0 cooljl31/atom-beautify#16

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch to Pretty-Diff for LESS support #54

Switch to Pretty-Diff for LESS support #54

Glavin001 commented Jul 28, 2014

Glavin001 commented Jul 28, 2014

mcdonnelldean commented Jul 29, 2014

Glavin001 commented Aug 1, 2014

Glavin001 commented Aug 2, 2014

nojaf commented Aug 2, 2014

Glavin001 commented Aug 2, 2014

nojaf commented Aug 2, 2014

Glavin001 commented Aug 2, 2014

nojaf commented Aug 2, 2014

seaside98 commented Aug 2, 2014

Glavin001 commented Aug 3, 2014

Glavin001 commented Aug 3, 2014

nojaf commented Aug 3, 2014

Glavin001 commented Aug 3, 2014

Glavin001 commented Aug 3, 2014

Switch to Pretty-Diff for LESS support #54

Switch to Pretty-Diff for LESS support #54

Comments

Glavin001 commented Jul 28, 2014

Glavin001 commented Jul 28, 2014

mcdonnelldean commented Jul 29, 2014

Glavin001 commented Aug 1, 2014

Glavin001 commented Aug 2, 2014

Before (Your Source)

After (Beautified with next version of Atom Beautify)

nojaf commented Aug 2, 2014

Glavin001 commented Aug 2, 2014

nojaf commented Aug 2, 2014

Glavin001 commented Aug 2, 2014

nojaf commented Aug 2, 2014

seaside98 commented Aug 2, 2014

Glavin001 commented Aug 3, 2014

Before (Original source code)

After (Beautified using lang = 'css')

Glavin001 commented Aug 3, 2014

nojaf commented Aug 3, 2014

Glavin001 commented Aug 3, 2014

Glavin001 commented Aug 3, 2014

After (Beautified using `lang = 'css'`)