add postcss plugins and config

package.json

@@ -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"
 	}
 }

postcss.config.js

@@ -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 }],
+  ],
+};

src/css/postcss/functions.js

@@ -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;

src/css/postcss/mixins.js

@@ -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,
+};

src/css/style.css

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