postcss/mixins.js

// eslint-disable-next-line import/no-extraneous-dependencies
const toHSL = require('hex-to-hsl');

// defines a custom property with identifier name, along with individual hue,
// saturation and lightness components
function defineColor(mixin, name, hex) {
  const [hue, sat, light] = toHSL(hex);
  const obj = {};
  obj[name] = hex;
  // need to convert hue to string otherwise postcss (is it postcss?) appends
  // 'px' to the property's value.
  obj[`${name}__h`] = hue.toString();
  obj[`${name}__s`] = `${sat}%`;
  obj[`${name}__l`] = `${light}%`;
  return obj;
}

// defines a custom property with identifier name, along with individual hue,
// saturation, lightness and alpha components
function defineColorAlpha(mixin, name, hex, alpha) {
  const obj = defineColor(mixin, name, hex);
  obj[`${name}-a`] = alpha;
  return obj;
}

const postcssMixins = {
  defineColor,
  defineColorAlpha,
};

module.exports = postcssMixins;