Stylus css Как показать объединенные хеши при слиянии? ⇐ CSS

[Anonymous]

С помощью следующего CSS-кода стилуса
foo = { '--width': 10px, height: 20px }

$my_colors={}

$red_colors={
'--red-1': red,
'--red-2': pink
}

$blue_colors={
'--blue-1': blue,
'--blue-2': cyan
}

.test{
{foo}
{merge($my_colors, $red_colors, $blue_colors )}
loop_merge()
}

loop_merge()
$merge_colors = merge($my_colors, $red_colors, $blue_colors )
for key, value in $merge_colors
{key}: value

Я получаю следующий CSS
.test {
--width: 10px;
height: 20px;
{"--red-1":"(#f00)","--red-2":"(#ffc0cb)","--blue-1":"(#00f)","--blue-2":"(#0ff)"}
}

Она должна выглядеть упорядоченной, как в переменной foo, но она отображается внутри хеша.
Я даже создал функцию с циклом for, но она мне ничего не показывает.
Это код, который вы должны получить
.test {
--width: 10px;
height: 20px;
--red-1: #f00;
--red-2: #ffc0cb;
--blue-1: #00f;
--blue-2: #0ff;
}


Подробнее здесь: https://stackoverflow.com/questions/783 ... with-merge