javascript - PostCSS での変数の使用

Question

PostCSSのプラグインの作成に問題があります。

私がやりたいことを理解するには、次のコードを見てください。

button {
     button: button;
     button-border: 3px solid #abcde1;
}

これが私がやりたいことです。

button-border が設定されていない場合、次のデフォルト値が必要です。

border: none;

ただし、button-border が設定されている場合は、button-border に設定されている値を使用したいと思います。上記の例では、次のようになります。

border: 3px solid #abcde1; 

変数を設定してやろうと思ったのですが、スコープに問題があると思います。これが私が試したコードです：

       css.walkDecls(decl => {                  
             var buttonBorder = 'none',
            button = [
                         'cursor: pointer;',
                         'display: inline-block;',
                         'min-height: 1em;',
                         'outline: none;',
                         'border:' + buttonBorder
                    ],
          joinButton = button.join('');
        if (decl.prop === 'button-border') {
                         var buttonBorder = decl.value;
                          decl.remove();
               }

         if (decl.prop === 'button') {
                         decl.replaceWith(joinButton);
        }  
    });

私が間違っていることと、どうすれば正しくできるかについての考えはありますか?

ありがとう、

モシェ