bad formatting of .less files using @variable or &:hover syntax

[guymguym]

@evocateur - This commit f416b0b seem to break the handling of .less files using @variable or &:hover formatting.

When @var appears it does very weird things - removes space before the @, add unwanted newline, and more.
With &:hover it injects a space before the : which breaks the pseudo class that was intended.

This issue makes it completely unusable for .less files :(
Any idea how to overcome?
Thanks!

[evocateur]

Right now, beautifying LESS (and SASS, or any other flavor of CSS preprocessor) is a bit out of the scope of the js-beautify project. Could you provide us with inputs and expected outputs, at least? Thanks!

[guymguym]

sure,
this is input, which is also the expected output (was the output of previous version):

@well-bg: @bg-color;
@well-border: @border-color;
.well {
    &:hover:not(.disabled):not(.active) {
        box-shadow: 0 1px 1px @border-color, 1px 0 1px @border-color;
    }
}

this is the current output:

@well-bg: @bg-color;

@well-border: @border-color;

.well {
    &: hover: not(.disabled): not(.active) {
        box-shadow: 0 1px 1px@border-color, 1px 0 1px@border-color;

    }
}

[evocateur]

@guymguym Thanks, I'll try to take a stab at this soon. Pull requests welcome and encouraged!

[mpavel]

Experiencing the same issue (I'm using this with the Sublime HTMLPrettify). Some example I/O

.entry {
        display: block;
        width: @width;
        height: @height;
        position: absolute;
...

gets modified to:

.entry {
        display: block;
        width: @width;
        height: @height;

position: absolute;
...

Or:

&-4 {
    top: 26.2rem;
    left: @second-left;
    padding-left: 6.5rem;
}

to:

&-4 {
    top: 26.2rem;
    left: @second-left;

padding-left: 6.5rem;
}

[guymguym]

@evocateur Thanks. I went over the code and there are few issues.

The @ case:

In css syntax @ can only appear as the first word in a rule (such as @media). For less-css, this is used for variable definition/usage. So here is a proposed fix for the relevant code:

            } else if (ch === '@') {
                // pass along the space we found as a separate item
                if (isAfterSpace) {
                    print.singleSpace();
                }
                output.push(ch);

                // strip trailing space, if present, for hash property checks
                var atRule = peekString(" ").replace(/\s$/, '');
                ...

where the new function peekString() is this:

        function peekString(endChar) {
            var str = eatString(endChar);
            pos -= str.length;
            next();
            return str;
        }

Side question - why does this project has both python and js implementation of the same logic?

[guymguym]

The : case

In css syntax pseudo classes/elements can only appear on top level. In less-css they can appear at any level. The only reason the formatter needs to handle : characters is to be able to force a since space after the colon in width: 1px versus no space as in button:hover { ... }.

Currently the code maintains the insideRule variable to handle this, but for less-css this notion is confusing since a new class can appear at any level. Another point to consider in less-css is that a rule can also appear at top-most level for variable definitions as in @bg: red;.

I guess the only way to identify the case correctly is to read the entire line, and detect if it ends with ; or with {. Unless you have a better suggestion.

[guymguym]

@evocateur I wonder - would it be useful if the prettify code will start by splitting the entire source text to statements by the characters {, }, ; and only then walk through the content of each statement separately?
The benefit would be that it would be much clearer what type of statement is currently being processed - if the statement ends with { then it is a selector, if it ends with ; then it is a rule. I wouldn't solve all the worlds issues, but would make the ones here a bit easier to tackle.

[mcdonnelldean]

Same issue using Atom.io. Samples and raw text for testing are in the link: Glavin001/atom-beautify#52

[guymguym]

@evocateur Would you please review my pull request to fix the @ case?
Thanks!
Guy

[vedraan]

I have recently switched from Sublime Text 2 to Sublime Text 3. I was using this plugin all the time with LESS and from what I can remember, I never had this issue in ST2. So the later version must have introduced this bug which makes it almost useless for LESS development since you almost always have stuff like @ and :

Hope you guys will be able to review the pull request(s) here and figure it out. It's a great beautify project, best one out there IMO.

[bitwiseman]

@guymguym - Requesting a review the way you are is fruitless. I didn't even know you were asking for one. Please submit a pull request with tests and python port.

[guymguym]

Hi @bitwiseman.

I submitted a pull request two months ago, but it was indeed without tests and python port which I simply wasn't aware of because this project's code is new to me. Was it fruitless to discuss this here to get to know the project parts for a first time contributor? Is there a better way to do so?

Anyway I just updated my pending pull request with tests and also the python code, and it passed the travis build, so I guess it's ready to pull - #496

However this issue is still not resolved by this fix - the harder problem is with the : case as I mentioned above, and without addressing it this still makes the css beautifier unusable for less-css. In my local setup I just hack this case to avoid beautifying around colons altogether to be able to use it. I will be happy to keep this discussion and think of the best path to resolve.

Cheers

[bitwiseman]

Ah, I see it. Thanks for you work on this.
I remember now why I didn't merge it - don't know enough to evaluate it's correctness. 😄

Could you squash your commits into one commit and point me to some documentation as to the correct syntax in this case?

As you've noticed, the beautifier is really lacking in LESS support. On one hand that is by design - it's a CSS beautifier not a LESS beautifier. But it seems like no one works in CSS alone.

[bitwiseman]

I took your code amended it and made further changes. The fixes are now live in v1.5.3.