在PostCSS中使用变量

Question

I am having a problem creating a plugin for PostCSS .

To understand what I want to do, please take a look at the following code:

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

Here is what I would like to do.

If button-border is NOT set, then I would like there to be a default value of:

border: none;

However, if button-border is set, then I would like to use the value set in button-border. Ini the example above that would be:

border: 3px solid #abcde1; 

I thought I would do that by setting a variable, but I think I'm having problems with scope. Here is the code that I have tried:

       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);
        }  
    });

Any idea of what I am doing wrong and how I can do it right?

Thanks,

Moshe

Answer 1

Here is the answer I received at the Postcss github page: https://github.com/postcss/postcss/issues/691#issuecomment-168686832

I tried it and it works.