Update pkgs, switch to eslint-config-postcss

Author: larsenwork

index.js

@@ -9,13 +9,13 @@ const helpers = require('./lib/helpers.js')
  */
 module.exports = postcss.plugin('easing-gradient', (options = {}) => {
   return function (css) {
-    css.walkRules((rule) => {
-      rule.walkDecls((decl) => {
+    css.walkRules(rule => {
+      rule.walkDecls(decl => {
         // If declaration value contains a -gradient.
         if (decl.value.includes('-gradient')) {
           // Parse the declaration and walk through the nodes - https://github.com/TrySound/postcss-value-parser.
           const parsedValue = valueParser(decl.value)
-          parsedValue.walk((node) => {
+          parsedValue.walk(node => {
             // Only modify gradient as the value can contain more e.g. 'linear-gradient(black, pink) center'.
             if (node.value === 'linear-gradient' || node.value === 'radial-gradient') {
               // Get a sensible array of gradient parameters where e.g. a function is split into multiple array items
@@ -34,9 +34,9 @@ module.exports = postcss.plugin('easing-gradient', (options = {}) => {
                     node.type = 'word'
                     // Assume if it has 4 params it's because the first one is the direction
                     if (gradientParams.length === 4) {
-                      node.value = `${node.value}(${gradientParams[0]}, ${colorStops.join(', ')})`
+                      node.value = `${ node.value }(${ gradientParams[0] }, ${ colorStops.join(', ') })`
                     } else {
-                      node.value = `${node.value}(${colorStops.join(', ')})`
+                      node.value = `${ node.value }(${ colorStops.join(', ') })`
                     }
                     // Update our declaration value
                     decl.value = parsedValue.toString()

index.test.js

@@ -2,10 +2,10 @@ const postcss = require('postcss')
 const plugin = require('./')
 
 function run (input, output, opts) {
-  return postcss([ plugin(opts) ]).process(input, {from: null})
+  return postcss([plugin(opts)]).process(input, { from: null })
     .then(result => {
       expect(result.css).toEqual(output)
-      expect(result.warnings().length).toBe(0)
+      expect(result.warnings()).toHaveLength(0)
     })
 }
 

lib/colorStops.js

@@ -3,17 +3,22 @@ const helpers = require('./helpers.js')
 
 /**
  * Calculate the color stops based on start+stopColor in an array and easingType
+ * @param {array} colors Two colors in an array
+ * @param {array} coordinates An array of coordinates (object with x and y keys)
+ * @param {number} alphaDecimals How many decimals should be on the returned color values
+ * @param {string} colorMode Color space used for color interpolation http://gka.github.io/chroma.js/#chroma-mix
+ * @returns {array} An array of colorstops (a string with color and position)
  */
 module.exports = (colors, coordinates, alphaDecimals = 5, colorMode = 'lrgb') => {
-  let colorStops = []
+  const colorStops = []
   colors = helpers.transparentFix(colors)
   coordinates.forEach(coordinate => {
     const ammount = coordinate.y
     const percent = coordinate.x * 100
     let color = chroma.mix(colors[0], colors[1], ammount, colorMode).css('hsl')
     color = helpers.roundHslAlpha(color, alphaDecimals)
     if (Number(coordinate.x) !== 0 && Number(coordinate.x) !== 1) {
-      colorStops.push(`${color} ${+percent.toFixed(2)}%`)
+      colorStops.push(`${ color } ${ +percent.toFixed(2) }%`)
     } else {
       colorStops.push(color)
     }

lib/helpers.js

@@ -7,36 +7,50 @@ const easeShorthands = ['ease', 'ease-in', 'ease-out', 'ease-in-out']
 const timingFunctions = [...easeShorthands, cubicFunction, stepsFunction]
 
 /**
-* Get before a parenthesis
+* Test if a string has a parenthesis
+* @param {String} str A text string
+* @returns {Boolean} If a string has a "("
 */
-const hasParenthesis = (str) => str.indexOf('(') !== -1
-const getBeforeParenthesisMaybe = (str) => hasParenthesis(str) ? str.substring(0, str.indexOf('(')) : str
+const hasParenthesis = str => str.indexOf('(') !== -1
 
 /**
- * Test if a string matches a css timing function
- */
-exports.isTimingFunction = (str) => timingFunctions.includes(getBeforeParenthesisMaybe(str))
+* Get substring before first parenthesis in a string
+* @param {String} str A text string
+* @returns {String} The substring if the provided string has a parenthesis. Otherwise the string.
+*/
+const getBeforeParenthesisMaybe = str => hasParenthesis(str) ? str.substring(0, str.indexOf('(')) : str
+
+/**
+* Test if a string matches a css timing function
+* @param {String} str A text string
+* @returns {Boolean} If the string is a timing function
+*/
+exports.isTimingFunction = str => timingFunctions.includes(getBeforeParenthesisMaybe(str))
 
 /**
  * Get insides of a parenthesis
- * Also used in this file so declared first and exported after
+ * @param {String} str A text string
+ * @returns {String} The substring within the parenthesis
+ * Note: It's also used in this file so declared first and exported after
  */
-const getParenthesisInsides = (str) => str.match(/\((.*)\)/).pop()
+const getParenthesisInsides = str => str.match(/\((.*)\)/).pop()
 exports.getParenthesisInsides = getParenthesisInsides
 
 /**
  * If a color is transparent then convert it to a hsl-transparent of the paired color
+ * @param {Array} colors An array with two colors
+ * @returns {Object} A color as chroma object
  */
-exports.transparentFix = (colors) => colors.map((color, i) => {
-  return color === 'transparent'
-    ? chroma(colors[Math.abs(i - 1)]).alpha(0).css('hsl')
-    : color
+exports.transparentFix = colors => colors.map((color, i) => {
+  return color === 'transparent' ? chroma(colors[Math.abs(i - 1)]).alpha(0).css('hsl') : color
 })
 
 /**
  * Change value to ';' on child objects of type 'div'
+ * @param {Array.<Object>} obj An array of objects
+ * @returns {Array.<Object>} An array of objects
  */
-exports.divToSemiColon = (obj) => {
+exports.divToSemiColon = obj => {
   obj.map(childObj => {
     if (childObj.type === 'div') {
       childObj.value = ';'
@@ -48,24 +62,26 @@ exports.divToSemiColon = (obj) => {
 
 /**
  * Round alpha in hsl colors to alphaDecimals
+ * @param {String} color As an hsl value
+ * @param {Number} alphaDecimals An integer specifying max number of deicamals
+ * @returns {String} A alpha value rounded version of the hsl color string
  */
 exports.roundHslAlpha = (color, alphaDecimals) => {
   const prefix = getBeforeParenthesisMaybe(color)
   const values = getParenthesisInsides(color)
     .split(',')
-    .map(string => string.indexOf('%') === -1
-      ? +Number(string).toFixed(alphaDecimals)
-      : string.trim()
-  )
-  color = `${prefix}(${values.join(', ')})`
+    .map(string => string.indexOf('%') === -1 ? +Number(string).toFixed(alphaDecimals) : string.trim())
+  color = `${ prefix }(${ values.join(', ') })`
   return color
 }
 
 /**
- * Return an error message
+ * Wrap a string telling the user we couldn't parse it
+ * @param {String} input A string
+ * @returns {String} The full error message wrapped around the string
  */
-exports.errorMsg = (input) => {
+exports.errorMsg = input => {
   return `Couldn't parse:
-${input}
+${ input }
 Check the syntax to see if it's correct/supported.`
 }