larsenwork / larsenwork/postcss-easing-gradients

color stop positions

Open
#6 2 comments 8 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1k
Forks
25
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue names no files or tests. Start by locating the PostCSS gradient-parsing entry point and how easing gradients are currently converted; define the supported positional color-stop subset and verify that the example produces percentage-based output suitable for mask-image.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.