add postcss plugins and config

This commit is contained in:
Ray Elliott 2021-03-27 17:25:42 +00:00
parent f64b5b0011
commit 42a691cc68
5 changed files with 75 additions and 2 deletions

View File

@ -20,5 +20,8 @@
"postcss-preset-env": "^6.7.0",
"postcss-simple-vars": "^6.0.3",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"hex-to-hsl": "^1.0.2"
}
}

14
postcss.config.js Normal file
View File

@ -0,0 +1,14 @@
const postcssFunctions = require('./src/css/postcss/functions');
const postcssMixins = require('./src/css/postcss/mixins');
module.exports = {
plugins: [
'postcss-import',
'postcss-custom-media',
['postcss-mixins', { mixins: postcssMixins }],
'postcss-preset-env',
'postcss-nesting',
'postcss-simple-vars',
['postcss-functions', { functions: postcssFunctions }],
],
};

View File

@ -0,0 +1,15 @@
const postcssFunctions = {
// takes the custom property defined by a color defining mixin, along
// with an alpha value and returns the derived css hsla() function.
alpha(name, alpha) {
const hue = `var(${name}__h)`;
const saturation = `var(${name}__s)`;
const lightness = `var(${name}__l)`;
return `hsla(${hue}, ${saturation}, ${lightness}, ${alpha})`;
},
spacer(number = 1) {
return `calc(var(--spacer-height, 1.5rem) * ${number})`;
},
};
module.exports = postcssFunctions;

36
src/css/postcss/mixins.js Normal file
View File

@ -0,0 +1,36 @@
// eslint-disable-next-line import/no-extraneous-dependencies
const toHSL = require('hex-to-hsl');
// 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;
}
// defines a custom property with identifier name, along with individual hue,
// saturation and lightness components
function defineHex(mixin, name, hex) {
const [hue, sat, light] = toHSL(hex);
return defineHSL(mixin, name, hue, `${sat}%`, `${light}%`);
}
// TODO - untested
// // font rendering -> useful for light text on dark backgrounds
function fontSmooth() {
return {
'-webkit-font-smoothing': 'antialiased',
'-moz-osx-font-smoothing': 'grayscale',
};
}
module.exports = {
defineHSL,
defineHex,
fontSmooth,
};

View File

@ -1,5 +1,10 @@
/* css to go here */
body {
background-color: blue;
:root {
@mixin defineHex --test-hsl, #00ff00;
}
body {
background-color: alpha(--test-hsl, 0.5);
@mixin fontSmooth;
}