thybzi · March 7, 2016 22:34
diff --git a/less2styl.html b/less2styl.html
 <!DOCTYPE html>
 <html>
    <meta charset="utf-8">
    <script>

        function fade2rbga(match, color, percentage) {
            return 'rgba(' + color + ', ' + (parseFloat(percentage) / 100) + ')';
        }

        function less2styl() {
            var input = document.getElementById('less');
            var output = document.getElementById('styl');
            var code = input.value;

            code = code
                .replace(/    /g, '  ')                                     // четыре пробела на два
                .replace(/ *\{ *\n/g, '\n')                                 // убираем открывающие {
                .replace(/\n *} */g, '')                                    // убираем закрывающие }
                .replace(/;( *\/\/.+)? */g, '$1')                           // убираем ; (оставляя комменты после них)
                .replace(/@([^\s:]+):/g, '$$$1 =')                          // переменные (присвоение)
                .replace(/( *\S+ *)@/g, '$1$$')                             // переменные (вызовы)
                .replace(/\(@/g, '($$')                                     // костыль для первого аргумента миксина
                .replace(/\$\{/g, '{$$')                                    // переменные: интерполяция
                .replace(/\$(todo|fixme|see|param)/g, '@$1')                // стайлдок-теги - это не переменные
                .replace(/~('.*\{\$.*')/g, 'unquote($1)')                   // ~'st{$ri}ng' => unquote('st{$ri}ng')
                .replace(/~(".*\{\$.*")/g, 'unquote($1)')                   // ~"st{$ri}ng" => unquote("st{$ri}ng")
                .replace(/~'(.+)'/g, '$1')                                  // ~'string' => string o_O
                .replace(/~"(.+)"/g, '$1')                                  // ~"string" => string O_o
                .replace(/fade *\( *(.+) *, *([0-9.]+)% *\)/g, fade2rbga)   // умный fade => rgba
                .replace(/fade *\(/g, 'rgba(')                              // тупой fade => rgba, где не сработал умный
                .replace(/\.(\S+) *> *\.(\S+) *\(/g, '$1__$2(')             // .component > .mixin  =>  component__mixin
                .replace(/\.(\S+) *\(/g, '$1(')                             // остальные миксины
                .replace(/\{length/g, '{unit')                              // стайлдок: {length} => {unit}
                .replace(/\{number/g, '{unit')                              // стайлдок: {number} => {unit}
                .replace(/\{keyword/g, '{ident')                            // стайлдок: {keyword} => {ident}
                .replace(/(@param *\{.+} *)/g, '$1$$')                      // стайлдок: {type} param => {type} $param
            ;

            output.value = code;
        }
    </script>
 <head>
 </head>
 <body>

 <textarea id="less" style="float: left; width: 49%; height: 600px;" placeholder="LESS input" oninput="less2styl()"></textarea>
 <textarea id="styl" style="float: right; width: 49%; height: 600px" placeholder="Stylus output"></textarea>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">
	<script>

	function fade2rbga(match, color, percentage) {
	return 'rgba(' + color + ', ' + (parseFloat(percentage) / 100) + ')';
	}

	function less2styl() {
	var input = document.getElementById('less');
	var output = document.getElementById('styl');
	var code = input.value;

	code = code
	.replace(/ /g, ' ') // четыре пробела на два
	.replace(/ \{ \n/g, '\n') // убираем открывающие {
	.replace(/\n } /g, '') // убираем закрывающие }
	.replace(/;( \/\/.+)? /g, '$1') // убираем ; (оставляя комменты после них)
	.replace(/@([^\s:]+):/g, '$$$1 =') // переменные (присвоение)
	.replace(/( \S+ )@/g, '$1$$') // переменные (вызовы)
	.replace(/\(@/g, '($$') // костыль для первого аргумента миксина
	.replace(/\$\{/g, '{$$') // переменные: интерполяция
	.replace(/\$(todo\|fixme\|see\|param)/g, '@$1') // стайлдок-теги - это не переменные
	.replace(/~('.\{\$.')/g, 'unquote($1)') // ~'st{$ri}ng' => unquote('st{$ri}ng')
	.replace(/~(".\{\$.")/g, 'unquote($1)') // ~"st{$ri}ng" => unquote("st{$ri}ng")
	.replace(/~'(.+)'/g, '$1') // ~'string' => string o_O
	.replace(/~"(.+)"/g, '$1') // ~"string" => string O_o
	.replace(/fade \( (.+) , ([0-9.]+)% *\)/g, fade2rbga) // умный fade => rgba
	.replace(/fade *\(/g, 'rgba(') // тупой fade => rgba, где не сработал умный
	.replace(/\.(\S+) > \.(\S+) *\(/g, '$1__$2(') // .component > .mixin => component__mixin
	.replace(/\.(\S+) *\(/g, '$1(') // остальные миксины
	.replace(/\{length/g, '{unit') // стайлдок: {length} => {unit}
	.replace(/\{number/g, '{unit') // стайлдок: {number} => {unit}
	.replace(/\{keyword/g, '{ident') // стайлдок: {keyword} => {ident}
	.replace(/(@param \{.+} )/g, '$1$$') // стайлдок: {type} param => {type} $param
	;

	output.value = code;
	}
	</script>
	<head>
	</head>
	<body>

	<textarea id="less" style="float: left; width: 49%; height: 600px;" placeholder="LESS input" oninput="less2styl()"></textarea>
	<textarea id="styl" style="float: right; width: 49%; height: 600px" placeholder="Stylus output"></textarea>

	</body>
	</html>