-1

Problem:

I want to make a Less-sorting script for myself. When i enter Less Code in the textarea and click the button, p#result should output the sorted Less Code.

The Less Code should be sorted like this:

{
Mixins(They all start with ".mx")

Properties(Sorted in alphabetic Order)
}

Here is what i have got so far:

index.html:

<head>
    <script src="jquery.min.js"></script>
</head>
<textarea id="input" style="width: 600px; height: 300px; resize: none;">
</textarea>
<p id="result" style="max-width: 600px; word-wrap: break-word;"></p>
<button>Sort</button>
<script src="jquery.sorter.js"></script>

jquery.sorter.js:

var result = "",
mixins = "",
properties = "";

$("button").on("click", function () {
    var textarea = $('#input').val().split('\n');
    
    function checkLine(position) {
        var index;
    
        for (index = position; index < textarea.length; ++index) {
            var line = textarea[index].trim();
        
            if (line.includes("{") === true)
            {
            
                result = result + mixins + "<br>" + properties + line + "<br>";
                mixins = "";
                properties = "";
            
                checkLine(index + 1);
            
            } else if (line.includes("}") === true)
            {
            
                result = result + mixins + properties + line + "<br>";
                mixins = "";
                properties = "";
                break;
            
            } else if (line.includes(".mx") === true)
            {
            
                mixins = mixins + line + "<br>";
            
            } else if (line.includes(":") === true)
            {
            
                properties = properties + line + "<br>";
            
            } else
            {
            
                result = result + "<br>";
            
            }
            console.log(index + ": " + mixins + " " + properties);
        }
    }

    checkLine(0);

    $("p#result").append(result);
    $("button").hide();
});

If i enter this:

.frame {
    color: blue;
    background-color: white;
    .mx-hello(white);
    .framesecond {
        font-size: 12px;
        background: green;
        .mx-test(white);
    }
}

I should get al least this output: (I didnt think of a sorting mechanism yet... :D)

.frame {
    .mx-hello(white);

    color: blue;
    background-color: white;
    .framesecond {
        .mx-test(white);
        
        font-size: 12px;
        background: green;
    }
}

But i get this Output:

.frame {
.mx-hello(white);

color: blue;
background-color: white;
.framesecond {
.mx-test(white);
font-size: 12px;
background: green;
}
.mx-test(white);
font-size: 12px;
background: green;
}
.mx-hello(white);

color: blue;
background-color: white;
.framesecond {
.mx-test(white);
font-size: 12px;
background: green;
}
.mx-test(white);
font-size: 12px;
background: green;
}

Background - Story:

I work for a Web-Development Company. My Less Code always looks a bit messy, but we have guidelines how to format our Code. If im done with a Project i always sit there hour for hour just rearranging Less Code. Then i thought to myself: "There must be an easier solution for my problem!". So i googled and googled and nothing really worked. Then i decided to try it myself and thats why i am here!

I hope you understand my Problem, if something is unclear please let me know so i can edit my Question! (Im not so good at javascript, so any help is appreciated! :D)

Community
  • 1
  • 1
Milan
  • 97
  • 1
  • 12

1 Answers1

1

I took a look at it to see if I could solve this one. Check this out:

Codepen: https://codepen.io/huppys/pen/VrbxLd?editors=1010

I replaced the string.includes("something") with some regular expressions to be able to filter even for some different kind of less expressions.

Plus: Properties get sorted. After finding a property the string describing the property gets pushed into an array. Before adding the found properties to the output string they get sorted.

Side note: What IDE or editor are you using for writing your LESS code? Probably it could take care of the syntax sorting itself?

owi
  • 91
  • 5
  • I use Eclipse... Do you know a feature in Eclipse for this...? – Milan Nov 13 '17 at 14:57
  • I'm not too familiar with Eclipse, but what I've found is [SO: How do I modify Eclipse Code Formatting](https://stackoverflow.com/questions/1601793/how-do-i-modify-eclipse-code-formatting) and a dedicated [Less plugin for Eclipse](https://www.normalesup.org/~simonet/soft/ow/eclipse-less.html). That might help you out. – owi Nov 21 '17 at 19:36
  • Thank you very much! Also your Codepen snippet is workin great! – Milan Nov 23 '17 at 21:39