postcss mixin

postcss-mixin-custom-properties.css

/* some pre-defined custom properties in my code */
:root {
--default-transition-duration: .2s;
--default-easing: ease-out;
}

/* define mixin */
@define mixin transition(--transition-property: all, --transition-duration: var(--default-transition-duration), --easing: var(--default-easing) ) {
   transition: --transition-property --transition-duration --easing;
}

/*input */
.my-thing {
  @mixin transition();
  padding: 2%;
}

/*output */
.my-thing {
  transition: all .2s ease-out;
  padding: 2%;
}

/*input */
.my-other-thing {
  @mixin transition(--transition-property: border);
}

/* output */
.my-other-thing {
  transition: border .2s ease-out;
}