color stop positions

[robjtede]

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.

[Grawl]

I want this feature too

[Ambient-Impact]

I ran into this same problem with mask-image, and I seem to have solved it by using multiple gradients, one that's a solid black and another with a fixed height as the fade, along with a few of the other mask-* properties to place and composite them. I compile from Sass before running PostCSS, but you should be able to adapt this to vanilla CSS easily:

  // We have to define the linear-gradient with easing separately as a custom
  // property because either PostCSS or postcss-easing-gradients replaces the
  // comma in "linear-gradient(black, black)" with a semicolon, breaking the
  // value. 🤦‍
  --gradient-mask: linear-gradient(
    transparent,
    #{$easing-decelerate},
    black
  );

  $fade-size: 4em;

  // The first linear-gradient is used as a solid colour that spans the full
  // width and height, while the second gradient is the actual fade out. This
  // allows us to set a specific size for the fade out (see $fade-size) even
  // though postcss-easing-gradients doesn't yet support colour stop positions.
  // This works because of the mask-composite values, which cause the solid
  // colour gradient (the first) to have the alpha of the second (the fade)
  // substracted from it, so that it doesn't overwrite the fade portion.
  //
  // @see https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite
  //   The standardized composite property, supported by Firefox/Gecko and Edge
  //   18 (pre-Chromium) as of 2019-11-29.
  //
  // @see https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite
  //   The non-standard property required for Chrome/Blink, Opera, Android
  //   WebView, and Safari/WebKit as of 2019-11-29.
  //
  mask-image:     linear-gradient(black, black), var(--gradient-mask);
  mask-size:      100%, 100% $fade-size;
  mask-repeat:    no-repeat;
  mask-position:  center, center bottom;
  -webkit-mask-composite: xor, source-over;
  mask-composite: subtract, add;