commit 42607e30c86755da9a2d17789f89a4128ee4e2e6 Author: ray Date: Tue Jan 5 10:52:05 2021 +0000 initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d8b83df --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +package-lock.json diff --git a/functions.js b/functions.js new file mode 100644 index 0000000..92d9d46 --- /dev/null +++ b/functions.js @@ -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; diff --git a/mixins.js b/mixins.js new file mode 100644 index 0000000..7fd3d28 --- /dev/null +++ b/mixins.js @@ -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; diff --git a/package.json b/package.json new file mode 100644 index 0000000..85ef0fe --- /dev/null +++ b/package.json @@ -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" + } +}