larsenwork/postcss-easing-gradients

PostCSS plugin to create smooth linear-gradients that approximate easing functions.

postcss-easing-gradients's Issues

Issues with CSS variables

Hi there,

Great plugin, but it doesn't seem to work with CSS variables.

// Works
background: linear-gradient(to right, green, ease, red);

// Fails
:root {
--red: red;
--green: green;
}

background: linear-gradient(to right, var(--green), ease, var(--red));

Option to start or stop at different locations

Sometimes I need to start a gradient at a point past 0% or stop it before 100%. Would it be possible to add support for this?

For example, a gradient such as:

linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0) 100%)

Not working with postcss-js?

It seems easing-gradients isn't working with postcss-js:

import postcssJs from 'postcss-js'
import rtlcss from 'rtlcss'
import gradients from 'postcss-easing-gradients'

const process = postcssJs.sync([ rtlcss, gradients ])

const css = {
  left: '5px',
  background: 'linear-gradient(to bottom, black, cubic-bezier(0.48, 0.3, 0.64, 1), transparent)'
}

console.log(process(css))
/*
{
  right: "5px",
  background: "linear-gradient(to bottom, black, cubic-bezier(0.48, 0.3, 0.64, 1), transparent)"
}
*/

As you can see it's not webpack or postcss-js issue, because rtlcss works fine.

Compatibility with PostCSS 8

Thanks for your PostCSS plugin!

As you probably know, PostCSS 8 was released a few days ago. It would be great if you could make this plugin compatible with the latest version. The creators of the project have even released this migration guide.

Plugin not executed

I use GatsbyJS for my site and added this plugin to my postcss.config.js but it does not work or even gets executed. I tried to add console.log directly to the code in node_modules and also tested the same with autoprefixer but this plugin prints nothing.

Here is a sandbox:
https://codesandbox.io/s/gatsby-starter-default-y8slq?fontsize=14

Lib seems to be stale? No updates in the last 2 years.

Is this library still actively maintained? It looks like it has not been updated for a while and also no issues or PR are being looked at.

Feature Request: Allow more than two initial color stops

I would find it very useful to be able to generate an easing gradient with a starting point, a via point, and an ending point.

Work with postcss-easings

Just tried to install both these packages:

• postcss-easings
• postcss-easing-gradients

Added both to .postcssrc.js:

module.exports = {
    plugins: ['postcss-easing-gradients', 'postcss-easings']
};

But this code is not processed:

background-image: linear-gradient(to right, black, ease-in-sine, transparent);

I tried to change order of plugins but it's not working too.

BUG: Multiple backgrounds fails with wrong generated syntax of 1st

$bg-color: #181818;

$gradient-primary-raw: linear-gradient(
  0deg,
  $color-primary,
  $color-primary2
);

background-image: linear-gradient(to right, $bg-color, $bg-color), $gradient-primary-raw;

generate this
background-image: linear-gradient(0deg; #181818; #181818), ...correct second gradient here...

Expected code
background-image: linear-gradient(0deg, #181818, #181818), ...correct second gradient here...

How to fix that? I mean, what plugin replace , with ; ???
That occurs only if I use variable with prepared gradient inside background-image that have multiple backgrounds.

Make a PR to the CSS Images specification

Related to w3c/csswg-drafts#1332, might I recommend making a PR or reaching out to the community to help you write a PR to add easing to the color stop syntax?

Here is the section that would need updating:
https://drafts.csswg.org/css-images-4/#color-stop-syntax

And here is the source bikeshed file that would be updated:
https://github.com/w3c/csswg-drafts/blob/master/css-images-4/Overview.bs#L1131-L1139

---

If this were added to the official spec, I would love to include this plugin in PostCSS Preset Env.

Update docs.

Just a note to the docs. Looks like the 'options' expect 'stops' instead of 'colorStops'.

postcss-easing-gradients/index.js

Line 12 in 2a18566

options.stops = 13

https://github.com/larsenwork/postcss-easing-gradients#colorstops-15

color stop positions

I'm not used to how PostCSS works under the hood so this might be a silly question.

Is it possible this plugin could support a subset of the positional arguments for color stops eg:

linear-gradient(
  to top,
  black 0%,
  ease-in-out,
  transparent 15%,
  linear,
  transparent 100%
);

I understand that this probably not possible to polyfill the entire set of positional arguments (calc, mixing %/px etc.) but surely just linearly interpolating between percentages should be possible given the output css uses percentages?

I came across this limitation while using mask-image with the linear gradient as a fade-out on the bottom of an image. This problem would usually be easily alleviated with background-size but, unfortunately, mask-image-size works differently such in such a way that anywhere not covered by mask-image is masked out. So the image fades nicely then just becomes transparent for the most part.

confused about docs

Hi, thank you for your code. I'm a bit confused by your docs and demos, though.

• In demo I find a 'precision' option passed to this plugin. This is not mentioned in your docs.

    .pipe(
      gulpPostcss([
        easingGradient({
          // Default settings
          precision: 0.1,
          alphaDecimals: 5,
        }),
      ])

• In demo pcss I found:

background: linear-gradient(to right, green, steps(4, skip-none), red);

What's steps? it's not standard css syntax, If I'm not wrong..

Could you please exaplain and/or update your docs and demos?