Make css formatting work with .less files

[muluc]

Hey thank you for your great work on that... it would be nice if you could enable .less file extension for css formatting or profile the option to define file extension matchers

cheers

Florian

[thecotne]

this is fixed by #83 but after that commit version is not changed so feature is not available

@akalongman we need new version

[muluc]

cool thanks! Looking forward for a new release :)

On 23 Sep 2014, at 22:55, cotne nazarashvili notifications@github.com wrote:

this is fixed by #83 but after that commit version is not changed so feature is not available

@akalongman we need new version

— Reply to this email directly or view it on GitHub.

[thecotne]

@muluc we have new release test and close this issue if it works for you

[muluc]

@thecotne thanks :) it's picking it up, but it is not respecting the nested struxture that you can apply in LESS.

it ends up like this:

.has-success {
    .form-control-feedback {
        color: @brand-primary;
}
}
}

Best

Flo

[steffenr]

I also tried auto-formatting and get the same issue as @muluc ;(

.links-wrapper {
        clear: both;
        margin: 0;
        ul {
            &.links {
                display: block;
                margin: 0;
                padding: 0;
                li {
                    display: block;
                    margin: @grid-gutter-size / 2 0 0;
                    padding: 0;
                    white-space: nowrap;
                    a {
                        .bi-button();
                        display: block;
                   }
              }
         }
    }
}
}
}

[noducks]

Am having the same issue.

Below is the output I get from codeformatter.

 .test {
     cursor: pointer;
     .btn {
         height: 50px;
         &:hover {
             background-color: #f5f5f5;
        }
        .top {
            font-size: 15px;
       }
       .bottom {
           font-size: 9px;
      }
 }
 }

If I format with js-beautify directly.

 $ js-beautify -v
 1.5.4
 $ js-beautify --type css test.less

The output is well formed. May just need a version update.

 .test {
     cursor: pointer;
     .btn {
         height: 50px;
         &:hover {
             background-color: #f5f5f5;
         }
         .top {
             font-size: 15px;
         }
         .bottom {
             font-size: 9px;
         }
     }
 }

[noducks]

As a temporary fix.

 git clone https://github.com/beautify-web/js-beautify.git

Replace the old cssbeautifier folder here:

~/Library/Application\ Support/Sublime\ Text\ 3/Packages/CodeFormatter/codeformatter/lib/cssbeautifier 

with the new cloned one here:

 js-beautify/python/cssbeautifier

And all works as expected... so far.