diff --git a/mixins.js b/mixins.js index a95e9a0..ecffdcc 100644 --- a/mixins.js +++ b/mixins.js @@ -1,31 +1,28 @@ // 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); +// untested TODO - test +function defineHSL(mixin, name, hue, sat, light) { 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; + 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, lightness and alpha components -function defineColorAlpha(mixin, name, hex, alpha) { - const obj = defineColor(mixin, name, hex); - obj[`${name}-a`] = alpha; - return obj; +// saturation and lightness components +function defineHex(mixin, name, hex) { + const [hue, sat, light] = toHSL(hex); + return defineHSL(name, hue, sat, light) } const postcssMixins = { - defineColor, - defineColorAlpha, + defineHSL, + defineHex, }; -module.exports = postcssMixins; +module.exports = postcssMixins; \ No newline at end of file