Use easing-coordinates and change to proposed syntax

Author: larsenwork

README.md

@@ -8,144 +8,149 @@
 
 </div>
 
-[PostCSS] plugin to create smooth linear-gradients that approximate easing functions.
+<br>
 
-```css
-.demo {
-  background: scrim-gradient(
-    black,
-    transparent
-  );
+[PostCSS](https://github.com/postcss/postcss) plugin to create smooth linear-gradients that approximate easing functions.
 
-  background: ease-in-out-quad-gradient(
-    to bottom left,
-    #bada55,
-    olive
-  );
+Visual examples and online editor on [larsenwork.com/easing-gradients](https://larsenwork.com/easing-gradients/)
 
-  background: ease-in-sine-gradient(
-    23deg,
-    hsla(300, 80%, 50%, 0.7),
-    rgb(120, 140, 255)
-  );
-}
-```
+⚠️ The [syntax](#syntax) has changed substantially in `^v.2.0.0` ⚠️
+
+<br>
 
-becomes
+## Examples
 
 ```css
-.demo {
+.cubic-bezier {
   background: linear-gradient(
+    to bottom,
+    black,
+    cubic-bezier(0.48, 0.30, 0.64, 1.00),
+    transparent
+  );
+  /* => */
+  background: linear-gradient(
+    to bottom,
     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%,
+    hsla(0, 0%, 0%, 0.94505) 7.9%,
+    hsla(0, 0%, 0%, 0.88294) 15.3%,
+    hsla(0, 0%, 0%, 0.81522) 22.2%,
+    hsla(0, 0%, 0%, 0.7426) 28.7%,
+    hsla(0, 0%, 0%, 0.66692) 34.8%,
+    hsla(0, 0%, 0%, 0.58891) 40.6%,
+    hsla(0, 0%, 0%, 0.50925) 46.2%,
+    hsla(0, 0%, 0%, 0.42866) 51.7%,
+    hsla(0, 0%, 0%, 0.34817) 57.2%,
+    hsla(0, 0%, 0%, 0.2693) 62.8%,
+    hsla(0, 0%, 0%, 0.19309) 68.7%,
+    hsla(0, 0%, 0%, 0.12126) 75.2%,
+    hsla(0, 0%, 0%, 0.05882) 82.6%,
+    hsla(0, 0%, 0%, 0.01457) 91.2%,
     hsla(0, 0%, 0%, 0) 100%
   );
+}
 
+.ease {
   background: 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%,
-    hsl(60, 100%, 25.1%) 100%
+    green,
+    ease,
+    red
   );
-
-
+  /* => */
   background: 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%,
-    hsl(231.1, 100%, 73.5%) 100%
+    hsl(120, 100%, 25.1%) 0%,
+    hsl(111.85, 100%, 23.5%) 7.8%,
+    hsl(98.92, 100%, 21.34%) 13.2%,
+    hsl(82.02, 100%, 19.05%) 17.6%,
+    hsl(60.02, 100%, 16.71%) 21.7%,
+    hsl(40.57, 100%, 21.3%) 25.8%,
+    hsl(28.11, 100%, 25.86%) 30.2%,
+    hsl(19.54, 100%, 30.32%) 35.1%,
+    hsl(13.47, 100%, 34.55%) 40.6%,
+    hsl(9.01, 100%, 38.49%) 46.9%,
+    hsl(5.73, 100%, 42.01%) 54.1%,
+    hsl(3.36, 100%, 44.98%) 62.2%,
+    hsl(1.74, 100%, 47.28%) 71.1%,
+    hsl(0.7, 100%, 48.86%) 80.6%,
+    hsl(0.15, 100%, 49.74%) 90.5%,
+    hsl(0, 100%, 50%) 100%
   );
 }
-```
 
-## Usage
-
-```js
-postcss([ require('postcss-easing-gradients') ])
+.steps {
+  background: linear-gradient(
+    to right,
+    green,
+    steps(4, skip-none),
+    red
+  );
+  /* => */
+  background: linear-gradient(
+    to right,
+    hsl(120, 100%, 25.1%) 0%,
+    hsl(120, 100%, 25.1%) 25%,
+    hsl(60.23, 100%, 16.73%) 25%,
+    hsl(60.23, 100%, 16.73%) 50%,
+    hsl(15.06, 100%, 33.33%) 50%,
+    hsl(15.06, 100%, 33.33%) 75%,
+    hsl(0, 100%, 50%) 75%,
+    hsl(0, 100%, 50%) 100%
+  );
+}
 ```
 
-See [PostCSS] docs for examples for your environment.
+<br>
 
 ## Syntax
 
-The syntax is `<gradient-type>([ <direction>,]? <start-color>, <stop-color>)` where
+Ccurrently only a subset of the [full syntax](https://github.com/w3c/csswg-drafts/issues/1332#issuecomment-299990698) is supported:
 
-* `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
+```xml
+linear-gradient(
+  [ <direction>,]?
+  <color>,
+  <animation-timing-function>,
+  <color>
+)
+```
 
-Note that it's exactly two colors and it doesn't support custom color stop locations.
+The steps syntax is also being figured out and currently [this](https://github.com/w3c/csswg-drafts/issues/1680#issuecomment-361550637) is supported.
 
-## Supported Gradient Types
+<br>
 
-```css
-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
+## Usage
+
+```js
+postcss([ require('postcss-easing-gradients') ])
 ```
 
+See [PostCSS Usage](https://github.com/postcss/postcss#usage) docs for examples for your environment.
+
+<br>
+
 ## Options
 
-* `precision: 0.1` is the default value and creates ~17 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.
+I wouldn't recommend tweaking from default values but:
 
-## Preview
+* `precision: 0.1` is the default and creates ~17 color stops. A higher number creates a more "low poly" gradient and banding becomes very visible when using anything above 0.2.
+* `alphaDecimals: 5` is the default. A lower number can result in banding.
 
-![preview](assets/linear-scrim-easeoutsine.gif)
+<br>
 
 ## Demo
 
 Make sure that you have gulp cli installed and then `cd demo`, `npm install` and `gulp`.
 
 If you want to develop then `npm link` in project root and then `npm link postcss-easing-gradients`
 
+<br>
+
 ## Contributions
 
 Are more than welcome. Code is linted using:
 
 [![js-standard-style][js-img]][js]
 
-[PostCSS]: https://github.com/postcss/postcss
 [ci-img]:  https://img.shields.io/travis/larsenwork/postcss-easing-gradients.svg
 [ci]:      https://travis-ci.org/larsenwork/postcss-easing-gradients
 [js-img]:  https://cdn.rawgit.com/feross/standard/master/badge.svg

assets/linear-scrim-easeoutsine.gif

@@ -8,7 +8,7 @@ body {
 }
 
 .gradient {
-  background-image: linear-gradient(to right, black, transparent);
+  background-image: linear-gradient(to right, red, blue);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -17,7 +17,7 @@ body {
 }
 
 .gradient--easing {
-  background: linear-gradient(to right, black, hsla(0, 0%, 0%, 0.988) 7.7%, hsla(0, 0%, 0%, 0.956) 14.8%, hsla(0, 0%, 0%, 0.91) 21%, hsla(0, 0%, 0%, 0.854) 26.5%, hsla(0, 0%, 0%, 0.794) 31.4%, hsla(0, 0%, 0%, 0.731) 35.9%, hsla(0, 0%, 0%, 0.667) 40.1%, hsla(0, 0%, 0%, 0.599) 44.2%, hsla(0, 0%, 0%, 0.533) 48.1%, hsla(0, 0%, 0%, 0.466) 52%, hsla(0, 0%, 0%, 0.397) 56%, hsla(0, 0%, 0%, 0.33) 60.1%, hsla(0, 0%, 0%, 0.266) 64.3%, hsla(0, 0%, 0%, 0.203) 68.8%, hsla(0, 0%, 0%, 0.143) 73.7%, hsla(0, 0%, 0%, 0.089) 79.2%, hsla(0, 0%, 0%, 0.043) 85.4%, hsla(0, 0%, 0%, 0.011) 92.5%, transparent);
+  background: linear-gradient(hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.94505) 7.9%, hsla(0, 0%, 0%, 0.88294) 15.3%, hsla(0, 0%, 0%, 0.81522) 22.2%, hsla(0, 0%, 0%, 0.7426) 28.7%, hsla(0, 0%, 0%, 0.66692) 34.8%, hsla(0, 0%, 0%, 0.58891) 40.6%, hsla(0, 0%, 0%, 0.50925) 46.2%, hsla(0, 0%, 0%, 0.42866) 51.7%, hsla(0, 0%, 0%, 0.34817) 57.2%, hsla(0, 0%, 0%, 0.2693) 62.8%, hsla(0, 0%, 0%, 0.19309) 68.7%, hsla(0, 0%, 0%, 0.12126) 75.2%, hsla(0, 0%, 0%, 0.05882) 82.6%, hsla(0, 0%, 0%, 0.01457) 91.2%, hsla(0, 0%, 0%, 0) 100%);
   width: 100vw;
   opacity: 1;
 }

demo/css/styles.css

@@ -8,7 +8,7 @@ body {
 }
 
 .gradient {
-  background-image: linear-gradient(to right, black, transparent);
+  background-image: linear-gradient(to right, red, blue);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -17,12 +17,7 @@ body {
 }
 
 .gradient--easing {
-  background: linear-gradient(
-    to right,
-    black,
-    cubic-bezier(0.42, 0, 0.58, 1),
-    transparent
-  );
+  background: linear-gradient(black, cubic-bezier(0.48, 0.30, 0.64, 1.00), transparent);
   width: 100vw;
   opacity: 1;
 }

demo/css/styles.pcss

@@ -39,8 +39,8 @@ function css () {
     .pipe(gulpPostcss([
       easingGradient({
         // Default settings
-        precision: 0.10,
-        alphaDecimals: 3
+        precision: 0.1,
+        alphaDecimals: 5
       })
     ]))
     .pipe(gulpRename({extname: '.css'}))

demo/gulpfile.js

@@ -10,6 +10,7 @@
   "license": "MIT",
   "devDependencies": {
     "browser-sync": "^2.18.8",
+    "easing-coordinates": "^1.0.1",
     "gulp": "^4.0.0",
     "gulp-postcss": "^6.4.0",
     "gulp-rename": "^1.2.2",