Linting and cleanup and adjusted scrim

Author: larsenwork

README.md

@@ -1,6 +1,9 @@
 # PostCSS Easing Gradients
 PostCSS plugin to create smooth linear-gradients that approximate easing functions.
 
+[![js-sta
+ndard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](http://standardjs.com)
+
 The syntax is `<gradient-type>([ <direction>,]? <start-color>, <stop-color>)` where
 * `gradient-type` is one of the supported gradient types
 * `direction` shares syntax with `linear-gradient` and is optional

demo/css/styles.css

@@ -8,16 +8,16 @@ body {
 }
 
 .gradient {
-  background-image: linear-gradient(to right, hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0));
+  background-image: linear-gradient(to right, black, transparent);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   height: 50vh;
   width: 50vw;
-  margin: 0 auto;
+  margin-left: 25vw;
 }
 
 .gradient--easing {
-  background-image: linear-gradient(to right, hsl(0, 100%, 50%) 0, hsla(0, 100%, 50%, 0.917) 5.3%, hsla(0, 100%, 50%, 0.834) 10.6%, hsla(0, 100%, 50%, 0.753) 15.9%, hsla(0, 100%, 50%, 0.672) 21.3%, hsla(0, 100%, 50%, 0.591) 26.8%, hsla(0, 100%, 50%, 0.511) 32.5%, hsla(0, 100%, 50%, 0.433) 38.4%, hsla(0, 100%, 50%, 0.357) 44.5%, hsla(0, 100%, 50%, 0.283) 50.9%, hsla(0, 100%, 50%, 0.213) 57.7%, hsla(0, 100%, 50%, 0.147) 65%, hsla(0, 100%, 50%, 0.089) 72.9%, hsla(0, 100%, 50%, 0.042) 81.4%, hsla(0, 100%, 50%, 0.011) 90.6%, hsla(0, 100%, 50%, 0) 100%);
-  width: 50vw;
+  background-image: linear-gradient(to right, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%, transparent 100%);
+  width: 65vw;
 }

demo/css/styles.pcss

@@ -8,16 +8,16 @@ body {
 }
 
 .gradient {
-  background-image: linear-gradient(to right, hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0));
+  background-image: linear-gradient(to right, black, transparent);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   height: 50vh;
   width: 50vw;
-  margin: 0 auto;
+  margin-left: 25vw;
 }
 
 .gradient--easing {
-  background-image: ease-out-sine-gradient(to right, hsla(0, 100%, 50%, 1), hsla(0, 100%, 50%, 0));
-  width: 50vw;
+  background-image: scrim-gradient(to right, black, transparent);
+  width: 65vw;
 }

helpers.js

@@ -0,0 +1,21 @@
+const Color = require('color')
+const getCoordinates = require('./getCoordinates.js')
+const helpers = require('./helpers.js')
+
+/**
+ * Calculate the color stops based on start+stopColor in an array and easingType
+ */
+module.exports = (colors, easingType, delta, alphaDecimals) => {
+  const fixedColors = helpers.transparentFix(colors)
+  const gradientCoordinates = getCoordinates(easingType, delta)
+  let colorStops = ''
+  Object.keys(gradientCoordinates).forEach((ammount) => {
+    // https://github.com/Qix-/color
+    let color = Color(fixedColors[1]).mix(Color(fixedColors[0]), ammount)
+    color = color.hsl().string()
+    color = helpers.roundHslAlpha(color, alphaDecimals)
+    colorStops += `${color} ${gradientCoordinates[ammount]}, `
+  })
+  colorStops += `${colors[1]} 100%`
+  return colorStops
+}