postcss/mixins.js

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

// untested TODO - test
function defineHSL(mixin, name, hue, sat, light) {
  const obj = {};
    obj[name] = name;
    // need to ensure hue is a 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 and lightness components
function defineHex(mixin, name, hex) {
  const [hue, sat, light] = toHSL(hex);
  return defineHSL(name, hue, sat, light)
}

const postcssMixins = {
  defineHSL,
  defineHex,
};

module.exports = postcssMixins;