rayelliott
/
css-framework
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactor mixins.js

This commit is contained in:
Ray Elliott 2021-03-27 17:20:48 +00:00
parent 44a0d9e2c2
commit 463856e15f
2 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -1,6 +1,8 @@
## TODO ## TODO
* eslint errors - do not stop compilation, just emit warnings? * css - body line heights, margins (what happened to these??)
* css linting (needs to be postcss compatible) * documentation regarding the CSS files - e.g., .text-component ???
* Eslint errors - do not stop compilation, just emit warnings?
* CSS linting (needs to be postcss compatible)
## Included ## Included

57
src/postcss/mixins.js
View File

@ -1,35 +1,36 @@
// 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');
const postcssMixins = { // TODO - untested
function defineHSL(mixin, name, hue, sat, light) {
const obj = {};
obj[name] = `hsl(${hue}, ${sat}, ${light})`;
// 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;
}
// TODO - untest // defines a custom property with identifier name, along with individual hue,
defineHSL(mixin, name, hue, sat, light) { // saturation and lightness components
const obj = {}; function defineHex(mixin, name, hex) {
obj[name] = `hsl(${hue}, ${sat}, ${light})`; const [hue, sat, light] = toHSL(hex);
// need to ensure hue is a string otherwise postcss (is it postcss?) appends return defineHSL(mixin, name, hue, `${sat}%`, `${light}%`);
// '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, // TODO - untested
// saturation and lightness components // // font rendering -> useful for light text on dark backgrounds
defineHex(mixin, name, hex) { function fontSmooth() {
const [hue, sat, light] = toHSL(hex); return {
return defineHSL(name, hue, sat, light); '-webkit-font-smoothing': 'antialiased',
}, '-moz-osx-font-smoothing': 'grayscale',
};
}
// TODO - untested module.exports = {
// // font rendering -> useful for light text on dark backgrounds defineHSL,
fontSmooth() { defineHex,
return { fontSmooth,
'-webkit-font-smoothing': 'antialiased',
'-moz-osx-font-smoothing': 'grayscale',
};
},
}; };
module.exports = postcssMixins;