Add precision and alphadecimals option

Author: larsenwork

README.md

@@ -1,45 +1,49 @@
-# Postcss Easing Gradients
+# PostCSS Easing Gradients
 PostCSS plugin to create smooth linear-gradients that approximate easing functions.
 
-The syntax is `<type>-gradient([ <direction>,]? <start-color>, <stop-color>)` where
-* `type` is one of the supported gradient types
+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
 * `start-color` and `stop-color` are css colors in any format
 
-## Supported gradient types
+*Note that it's exactly two colors and it doesn't support custom color stop locations.*
+
+## Supported Gradient Types
 ```
-ease-in-sine
-ease-out-sine
-ease-in-out-sine 
-ease-in-quad
-ease-out-quad
-ease-in-out-quad
-scrim
+ease-in-sine-gradient
+ease-out-sine-gradient
+ease-in-out-sine-gradient
+ease-in-quad-gradient
+ease-out-quad-gradient
+ease-in-out-quad-gradient
+scrim-gradient
 ```
-Note: Scrim is a custom easing inspired by Material Design text protection scrims
+*Scrim is a custom easing inspired by Material Design text protection scrims*
+
+## Options
+* `precision: 0.1` is the default value and creates ~17 color stops. The demo uses 0.15 which creates ~11 color stops. I wouldn't recommending using anything above 0.2 as banding becomes very obvious.
+* `alphaDecimals: 3` is the default number of decimals for alpha values and I wouldn't recommend changing it. Increase it for greater precision.
 
 ## Examples
 ```
-#pcss
-scrim-gradient(black, transparent)
+scrim-gradient(black, transparent);
 
-ease-in-out-quad-gradient(to bottom left, #bada55, olive)
+ease-in-out-quad-gradient(to bottom left, #bada55, olive);
 
-ease-in-sine-gradient(23deg, hsla(300, 80%, 50%, .7), rgb(120, 140, 255))
+ease-in-sine-gradient(23deg, hsla(300, 80%, 50%, .7), rgb(120, 140, 255));
 ```
 becomes
 ```
-#css
-linear-gradient(hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.86) 8.52%, hsla(0, 0%, 0%, 0.72) 17.53%, hsla(0, 0%, 0%, 0.58) 27.19%, hsla(0, 0%, 0%, 0.46) 36.28%, hsla(0, 0%, 0%, 0.36) 44.56%, hsla(0, 0%, 0%, 0.28) 51.97%, hsla(0, 0%, 0%, 0.21) 59.18%, hsla(0, 0%, 0%, 0.15) 66.33%, hsla(0, 0%, 0%, 0.1) 73.39%, hsla(0, 0%, 0%, 0.06) 80.36%, hsla(0, 0%, 0%, 0.03) 87.18%, hsla(0, 0%, 0%, 0.01) 93.73%, hsla(0, 0%, 0%, 0) 100%)
+linear-gradient(hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.86) 8.52%, hsla(0, 0%, 0%, 0.72) 17.53%, hsla(0, 0%, 0%, 0.58) 27.19%, hsla(0, 0%, 0%, 0.46) 36.28%, hsla(0, 0%, 0%, 0.36) 44.56%, hsla(0, 0%, 0%, 0.28) 51.97%, hsla(0, 0%, 0%, 0.21) 59.18%, hsla(0, 0%, 0%, 0.15) 66.33%, hsla(0, 0%, 0%, 0.1) 73.39%, hsla(0, 0%, 0%, 0.06) 80.36%, hsla(0, 0%, 0%, 0.03) 87.18%, hsla(0, 0%, 0%, 0.01) 93.73%, hsla(0, 0%, 0%, 0) 100%);
 
-linear-gradient(to bottom left, hsl(74, 64%, 59%) 0%, hsl(74, 64%, 59%) 6.667%, hsl(74, 62%, 58%) 13.333%, hsl(73, 60%, 57%) 20%, hsl(72, 57%, 55%) 26.667%, hsl(71, 54%, 52%) 33.333%, hsl(70, 53%, 48%) 40%, hsl(68, 58%, 44%) 46.667%, hsl(66, 64%, 40%) 53.333%, hsl(65, 70%, 36%) 60%, hsl(63, 77%, 33%) 66.667%, hsl(62, 84%, 30%) 73.333%, hsl(61, 90%, 28%) 80%, hsl(61, 95%, 26%) 86.667%, hsl(60, 98%, 25%) 93.333%, hsl(60, 100%, 25%) 100%)
+linear-gradient(to bottom left, hsl(74.4, 64.3%, 59.4%) 0, hsl(74.2, 63.2%, 58.8%) 9.7%, hsl(73.5, 60.7%, 57.1%) 18.3%, hsl(72.6, 57.5%, 54.9%) 25.7%, hsl(71.5, 54.2%, 52.3%) 32.2%, hsl(70.4, 52.1%, 49.6%) 37.9%, hsl(69.2, 55.1%, 46.7%) 43.1%, hsl(67.9, 58.7%, 43.7%) 47.9%, hsl(66.7, 62.8%, 40.6%) 52.4%, hsl(65.4, 67.6%, 37.7%) 57.2%, hsl(64.2, 72.9%, 34.8%) 62.4%, hsl(63, 79%, 32%) 68.2%, hsl(61.9, 85.5%, 29.5%) 74.7%, hsl(60.9, 92.3%, 27.3%) 82.2%, hsl(60.2, 97.8%, 25.7%) 90.9%, olive 100%);
 
-linear-gradient(23deg, hsla(300, 80%, 50%, 0.7) 0%, hsla(300, 80%, 50%, 0.7) 6.667%, hsla(299, 80%, 50%, 0.71) 13.333%, hsla(298, 80%, 51%, 0.71) 20%, hsla(297, 81%, 52%, 0.73) 26.667%, hsla(295, 81%, 54%, 0.74) 33.333%, hsla(292, 82%, 55%, 0.76) 40%, hsla(289, 82%, 57%, 0.78) 46.667%, hsla(285, 83%, 59%, 0.8) 53.333%, hsla(280, 85%, 61%, 0.82) 60%, hsla(275, 86%, 64%, 0.85) 66.667%, hsla(268, 88%, 66%, 0.88) 73.333%, hsla(261, 90%, 69%, 0.91) 80%, hsla(252, 93%, 72%, 0.94) 86.667%, hsla(242, 96%, 75%, 0.97) 93.333%, hsla(231, 100%, 74%, 1) 100%)
+linear-gradient(23deg, hsla(300, 80%, 50%, 0.7) 0, hsla(299.1, 80.2%, 50.6%, 0.703) 9.7%, hsla(296.8, 80.7%, 52.1%, 0.713) 18.9%, hsla(293.3, 81.6%, 54.3%, 0.727) 27.4%, hsla(289.1, 82.6%, 56.7%, 0.745) 35.2%, hsla(284.3, 83.7%, 59.2%, 0.764) 42.5%, hsla(279.2, 85%, 61.7%, 0.786) 49.3%, hsla(274, 86.4%, 64%, 0.808) 55.7%, hsla(268.5, 87.8%, 66.2%, 0.831) 61.8%, hsla(263, 89.4%, 68.2%, 0.854) 67.7%, hsla(257.4, 91%, 70.1%, 0.878) 73.4%, hsla(251.8, 92.7%, 71.8%, 0.902) 78.9%, hsla(246.2, 94.4%, 73.4%, 0.927) 84.3%, hsla(240.6, 96.2%, 74.9%, 0.951) 89.6%, hsla(235.4, 98.3%, 74.3%, 0.976) 94.9%, rgb(120,140,255) 100%);
 ```
 
 ## Demo
-You can try it out by running `npm install` and `gulp` in the demo folder. 
+You can try it out by running `npm install` and `gulp` in the demo folder.
 
-This is how the scrim-gradient looks: 
+This is how the scrim-gradient looks:
 
 ![compare](https://github.com/larsenwork/postcss-easing-gradients/blob/master/demo/compare.png?raw=true)

demo/gulpfile.js

@@ -36,7 +36,12 @@ function watch() {
 function css() {
   return gulp
     .src(paths.styles.src)
-    .pipe(gulpPostcss([easingGradient]))
+    .pipe(gulpPostcss([
+      easingGradient({
+        precision: 0.15,
+        alphaDecimals: 3
+      })
+    ]))
     .pipe(gulpRename({extname: '.css'}))
     .pipe(gulp.dest(paths.styles.dest));
 };

helpers.js

@@ -13,7 +13,6 @@ const easeInOutQuad = require('eases/quad-in-out');
 /**
  * Other constants
  */
-const decimalPrecision = 3;
 const scrimCoordinates = {
   0.00: '0%',
   0.14: '8.52%',
@@ -33,13 +32,13 @@ const scrimCoordinates = {
 /**
  * Calculate the color stops based on start+stopColor in an array and easingType
  */
-exports.getColorStops = function(colors, easingType) {
+exports.getColorStops = function(colors, easingType, delta, alphaDecimals) {
   colors = transparentFix(colors);
-  let gradientCoordinates = getCoordinates(easingType);
+  let gradientCoordinates = getCoordinates(easingType, delta);
   let colorStops = '';
   for (let ammount in gradientCoordinates) {
     let color = Color(colors[1]).mix(Color(colors[0]), ammount);
-    color = roundHslHueAlpha(color.hsl().string());
+    color = roundHslAlpha(color.hsl().string(), alphaDecimals);
     colorStops += `, ${color} ${gradientCoordinates[ammount]}`;
   }
   colorStops += `, ${colors[1]} 100%`;
@@ -60,14 +59,13 @@ function transparentFix(colors) {
  * Get coordinates based on easing function.
  * Delta checks ensures there's roughly the same distance between coordinates.
  */
-function getCoordinates(easingFunction) {
+function getCoordinates(easingFunction, delta) {
   if (easingFunction === 'scrim-gradient') return scrimCoordinates;
 
   const yIncrements = 0.001;
   const deltaTolerance = 0.01;
   const deltaAdjust = 0.001;
 
-  let delta = 0.1;
   let coordinates = {};
   let x = 0;
   let y = 0;
@@ -131,8 +129,8 @@ function ease(x, type) {
 /**
  * Convert decimal number to percentage string
  */
-function getPercentage (num) {
-  return parseFloat((num * 100).toFixed(decimalPrecision)) + '%';
+function getPercentage(number) {
+  return round10(number * 100, -1) + '%';
 };
 
 /**
@@ -143,15 +141,15 @@ function isFarEnough(x, y, xOld, yOld, delta) {
 };
 
 /**
- * Round hue and alpha in hsl colors to decimalPrecision
+ * Round alpha in hsl colors to alphaDecimals
  */
-function roundHslHueAlpha(color) {
+function roundHslAlpha(color, alphaDecimals) {
   let prefix = color.substring(0, color.indexOf('('));
   let values = color
     .substring(color.indexOf('(') + 1, color.indexOf(')'))
     .split(',')
     .map(string => string.indexOf('%') === -1
-      ? round10(Number(string), -decimalPrecision)
+      ? round10(Number(string), -alphaDecimals)
       : string.trim()
     );
   return `${prefix}(${values.join(', ')})`;

index.js

@@ -9,6 +9,8 @@ const valueParser = require('postcss-value-parser');
 /**
  * Other constants
  */
+const defaultPrecision = 0.1;
+const defaultAlphaDecimals = 3;
 const errorPrefix = 'Error[postcss-easing-gradients]:';
 const supportedGradients = [
   'ease-in-sine-gradient',
@@ -24,8 +26,11 @@ const supportedGradients = [
  * The easing gradient function is a postcss plugin which supports the above
  * mentioned gradient types.
  */
-module.exports = postcss.plugin('easing-gradient', function easingGradient() {
+module.exports =
+postcss.plugin('easing-gradient', function easingGradient(options) {
   return function (css) {
+    options = options || {};
+
     css.walkRules(function (rule) {
       rule.walkDecls(function (decl, i) {
 
@@ -59,13 +64,14 @@ module.exports = postcss.plugin('easing-gradient', function easingGradient() {
                 // If param isn't a color
                 catch(error) {
 
-                  // Test if it's a word or space and assume that's part of the
-                  // direction anotation — e.g. 'to'+' '+'top' or '45deg'
+                  // Test if it's a word or space and before the first color
+                  // and assume that's part of the direction anotation e.g.
+                  // 'to'+' '+'top' or '45deg'
                   if (param.type === 'word' || param.type === 'space') {
                     if (colors.length < 1) {
                       direction += param.value;
 
-                    // But if it happens after the first color then it's maybe
+                    // But if it happens after the first color then it's prolly
                     // a color stop and not something we support
                     } else if (param.type !== 'space') {
                       let errorMsg = `${errorPrefix} Sorry, I don't support `;
@@ -96,7 +102,12 @@ module.exports = postcss.plugin('easing-gradient', function easingGradient() {
               }
 
               // Get the color stops using our new
-              const colorStops = helpers.getColorStops(colors, node.value);
+              const colorStops = helpers.getColorStops(
+                colors,
+                node.value,
+                options.precision || defaultPrecision,
+                options.alphaDecimals || defaultAlphaDecimals
+              );
 
               // Update node
               node.type = 'word';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-easing-gradients",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "PostCSS plugin to create smooth linear-gradients that approximate easing functions.",
   "main": "index.js",
   "scripts": {