initial commit

This commit is contained in:
Ray Elliott 2021-01-05 10:52:05 +00:00
commit 42607e30c8
4 changed files with 58 additions and 0 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
package-lock.json

12
functions.js Normal file
View File

@ -0,0 +1,12 @@
const postcssFunctions = {
// takes the custom property defined by defineColor or defineColorAlpha, along
// with an alpha value and returns the derived css hsla() function.
toHSLA(name, alpha) {
const hue = `var(${name}__h)`;
const saturation = `var(${name}__s)`;
const lightness = `var(${name}__l)`;
return `hsla(${hue}, ${saturation}, ${lightness}, ${alpha})`;
},
};
module.exports = postcssFunctions;

31
mixins.js Normal file
View File

@ -0,0 +1,31 @@
// 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;

14
package.json Normal file
View File

@ -0,0 +1,14 @@
{
"name": "postcss",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"hex-to-hsl": "^1.0.2"
}
}