rayelliott
/
postcss
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add defineHS()L, remove defineColorAlpha()

This commit is contained in:
Ray Elliott 2021-02-17 17:44:17 +02:00
parent 370921f23e
commit 30f18de039
1 changed files with 16 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
mixins.js
View File

@ -1,13 +1,11 @@
// eslint-disable-next-line import/no-extraneous-dependencies // eslint-disable-next-line import/no-extraneous-dependencies
const toHSL = require('hex-to-hsl'); const toHSL = require('hex-to-hsl');
// defines a custom property with identifier name, along with individual hue, // untested TODO - test
// saturation and lightness components function defineHSL(mixin, name, hue, sat, light) {
function defineColor(mixin, name, hex) {
const [hue, sat, light] = toHSL(hex);
const obj = {}; const obj = {};
obj[name] = hex; obj[name] = name;
// need to convert hue to string otherwise postcss (is it postcss?) appends // need to ensure hue is a string otherwise postcss (is it postcss?) appends
// 'px' to the property's value. // 'px' to the property's value.
obj[`${name}__h`] = hue.toString(); obj[`${name}__h`] = hue.toString();
obj[`${name}__s`] = `${sat}%`; obj[`${name}__s`] = `${sat}%`;
@ -16,16 +14,15 @@ function defineColor(mixin, name, hex) {
} }
// defines a custom property with identifier name, along with individual hue, // defines a custom property with identifier name, along with individual hue,
// saturation, lightness and alpha components // saturation and lightness components
function defineColorAlpha(mixin, name, hex, alpha) { function defineHex(mixin, name, hex) {
const obj = defineColor(mixin, name, hex); const [hue, sat, light] = toHSL(hex);
obj[`${name}-a`] = alpha; return defineHSL(name, hue, sat, light)
return obj;
} }
const postcssMixins = { const postcssMixins = {
defineColor, defineHSL,
defineColorAlpha, defineHex,
}; };
module.exports = postcssMixins; module.exports = postcssMixins;