From 42a691cc68625c563fbafcb9f051f8ecb9c657cf Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Sat, 27 Mar 2021 17:25:42 +0000
Subject: [PATCH] add postcss plugins and config

---
 package.json                 |  3 +++
 postcss.config.js            | 14 ++++++++++++++
 src/css/postcss/functions.js | 15 +++++++++++++++
 src/css/postcss/mixins.js    | 36 ++++++++++++++++++++++++++++++++++++
 src/css/style.css            |  9 +++++++--
 5 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 postcss.config.js
 create mode 100644 src/css/postcss/functions.js
 create mode 100644 src/css/postcss/mixins.js

diff --git a/package.json b/package.json
index 7d7adaf..7e1530e 100644
--- a/package.json
+++ b/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"
 	}
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..7bece88
--- /dev/null
+++ b/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 }],
+  ],
+};
diff --git a/src/css/postcss/functions.js b/src/css/postcss/functions.js
new file mode 100644
index 0000000..b7577c9
--- /dev/null
+++ b/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;
diff --git a/src/css/postcss/mixins.js b/src/css/postcss/mixins.js
new file mode 100644
index 0000000..365cfb2
--- /dev/null
+++ b/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,
+};
diff --git a/src/css/style.css b/src/css/style.css
index 5294190..5091a4a 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -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;
 }