Milan Milan - 9 months ago 99
Less Question

Javascript Less Sorter

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)


owi owi
Answer Source

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?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download