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