an attempt for a dynamic gradient-mixin with "postcss-mixins"

gradient.js

// @flow

/*
background: -moz-linear-gradient(left, $(colorA) $(stopA), $(colorB) $(stopB));
background: -webkit-linear-gradient(left, $(colorA) $(stopA), $(colorB) $(stopB));
background: linear-gradient(to right, $(colorA) $(stopA), $(colorB) $(stopB));
*/

const isColor: Function = (value: string): boolean => (
  value.indexOf('#') > -1 || value.indexOf('rgb') > -1
);

module.exports = (mixin: any, firstDir: string, secondDir: string, ...args: Array<string>) => {

  let hasTwoDirections: boolean = true;
  if (isColor(secondDir)) {
    args.unshift(secondDir);
    hasTwoDirections = false;
  }

  const finalValues: Array<string> = [];
  for (let i = 0, len = args.length; i < len; i += 2) {
    const one: string = args[i];
    const two: string = args[i + 1];

    if (two) {
      finalValues.push(`${one} ${two}`);
    } else if (one) {
      finalValues.push(one);
    }
  }


  let gradientStr: string = `${firstDir} ${secondDir}, ${finalValues.join(', ')}`;
  if (!hasTwoDirections) {
    gradientStr = `${firstDir}, ${finalValues.join(', ')}`;
  }

  let mozGradient = gradientStr;
  if (firstDir === 'to') {
    if (secondDir === 'right') {
      mozGradient = `left, ${finalValues.join(', ')}`;
    }
  }

  return {
    'background-image': `-moz-linear-gradient(${mozGradient})`,
    'background-image': `-webkit-linear-gradient(${mozGradient})`,
    'background-image': `linear-gradient(${gradientStr})`,
  };
};