add postcss plugins and config
This commit is contained in:
parent
f64b5b0011
commit
42a691cc68
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 }],
|
||||
],
|
||||
};
|
|
@ -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;
|
|
@ -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,
|
||||
};
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue