csstools/postcss-color-mod-function

Error:Expected a color with postcss-mixins plugin

8beeeaaat opened this issue · 1 comments

[postcss]

@define-mixin clickable $bgcolor{
  background-color: color-mod($bgcolor shade(0%));
  &:hover{
    background-color: color-mod($bgcolor shade(10%));
  }
  &:active{
    background-color: color-mod($bgcolor shade(20%));
  }
}

button{
  @mixin clickable blue;
}

[postcss.config.js]

module.exports = {
  plugins: [
    require('postcss-mixins'),
    require('postcss-color-mod-function')({
      transformVars: true,
    })
  ]
};

The mixin plugin will need to run before this plugin, or else this plugin will attempt to resolve $bgcolor as if it were a named color.