LESS mixin unexpected code formatting

Description

This is moved over from https://github.com/microsoft/vscode/issues/146693

Using VSCode 1.66.0 and the new built-in LESS code formatting feature less.format.enable implemented by the JS Beautify library.

When using a LESS mixin that accepts CSS code rules as a parameter (this is used for media query mixins), the formatting when saved is a little unexpected. The formatting is consistent, but it is unusal.

Input & Expected Output

.example(@rules) {
    @rules();
}

.test {
    .example({
        color:red;
    });
}

Actual Output

.example(@rules) {
    @rules();
}

.test {
    .example( {
            color:red;
        }

    );
}

More Information

Similar issue reported a while back js-beautify issue 722

I’ve noticed that if you add the following to VSCode’s settings.json file, the results are slightly better:

"less.format.newlineBetweenRules": false

This gives you formatting like:

.example(@rules) {
    @rules();
}

.test {
    .example( {
            color:red;
        }
    );
}

I was asked to move the issue over here, so hope it’s in the right place now.

Environment

OS: macOS 12.3.1 VSCode 1.66.0 which bundles js-beautify

I have been trying to track down the version of js-beautify, but I cannot seem to find it within VSCode, so if anyone can advise how I can report this that would be great.

Settings

Defined by VSCode

[mhnaeem]

@aeschli @bitwiseman I have added a PR for a possible solution to the spacing problems mentioned in this ticket and #722.

[aeschli]

VS Code 1.66.0 uses jsbeautify 1.14.0