refactor mixins.js

README.md

@@ -1,6 +1,8 @@
 ## TODO
-* eslint errors - do not stop compilation, just emit warnings?
-* css linting (needs to be postcss compatible)
+* css - body line heights, margins (what happened to these??)
+* 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

src/postcss/mixins.js

@@ -1,10 +1,8 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 const toHSL = require('hex-to-hsl');
 
-const postcssMixins = {
-
-  // TODO - untest
-  defineHSL(mixin, name, hue, sat, light) {
+// 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
@@ -13,23 +11,26 @@ const postcssMixins = {
   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
-  defineHex(mixin, name, hex) {
+// 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(name, hue, sat, light);
-  },
+  return defineHSL(mixin, name, hue, `${sat}%`, `${light}%`);
+}
 
-  // TODO - untested
-  // // font rendering -> useful for light text on dark backgrounds
-  fontSmooth() {
+// 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 = postcssMixins;
+module.exports = {
+  defineHSL,
+  defineHex,
+  fontSmooth,
+};