postcss-gradient-stop-increments

[romainmenke]

see : w3c/csswg-drafts#8616

@Afif13 This is a prototype for the ++ syntax.
It uses calc and max to ensure that the values increment in predictable ways.

This won't work with var() because we can not statically determine if var() will resolve to a color or a length. (+var() is fine, we know that that must be a length)

(for side-by-side examples : https://github.com/csstools/postcss-plugins/blob/relative-increments--sensible-boxer-dog-8f177aa015/experimental/postcss-gradient-stop-increments/test/examples/example.preserve-true.expect.css)

.example-1 {
	background: linear-gradient(red 50%, blue ++1px);
}

.example-2 {
	background: conic-gradient(red ++60deg, blue ++10deg ++50deg, green ++60deg, yellow ++60deg);
}

.example-3 {
	background: conic-gradient(pink ++60deg, cyan 0 ++20deg, gold 0 ++10deg);
}

.example-4 {
	background: linear-gradient(orange 20px, magenta 2vi, aqua ++2vw);
}

/* becomes */

.example-1 {
	background: linear-gradient(red 50%, blue calc(50% + +1px));
}

.example-2 {
	background: conic-gradient(red +60deg, blue 70deg 120deg, green 180deg, yellow 240deg);
}

.example-3 {
	background: conic-gradient(pink +60deg, cyan 0 80deg, gold 0 90deg);
}

.example-4 {
	background: linear-gradient(orange 20px, magenta 2vi, aqua calc(max(20px, 2vi) + +2vw));
}

[brandonmcconnell]

@romainmenke This looks really good!

Why do some examples of ++ compile to still include + and others don't?

Examples:

• .example-1 ++1px → calc(50% + +1px) (with +)
• .example-2 ++60deg → +60deg (with +)
• .example-3 ++20deg → 80deg (without +)
• .example-4 ++2vw → calc(max(20px, 2vi) + +2vw)) (with +)

I would presume this won't actually matter in practice if this hits core CSS, as that'll all happen under the hood and we'll only see the actual ++ syntax even in the client, but I was curious.

Seriously great & fast work on this! 💯🔥

[romainmenke]

Under the hood this uses our tokenizer. We build it specifically for dev tooling and it preserves the original input (including whitespace and comments). This is the major difference between it and something like csstree.

But I also added @csstools/css-calc so that the overall output would be smaller.

This package can solve some calc() expressions. (e.g. calc(10px + 3px))
The output from that package loses the original notation.

So the leading + is dropped when the output is the result of a calc() expression and not the original bits wrapped in max()|calc()

[Afif13]

Thanks for your effort 👍 looks very promising! I will try it and create a few demos to add it to the proposal.

[brandonmcconnell]

The package you created does not appear to be public on npmjs.com yet. Is this the correct link?:
https://www.npmjs.com/package/@csstools/postcss-gradient-stop-increments-experimental

[romainmenke]

Yeah, hasn't been published yet. I first wanted to be sure that this was looking ok for @Afif13

---

@Antonio-Laguna this should be good to go, and doesn't require the usual in-depth review (is experimental).
Do you have time for a release tomorrow? 🙇

[brandonmcconnell]

@romainmenke @Afif13 I've also got this working pretty effectively in a CodePen env for easy tinkering. Thanks for all the work on this, Romain!

https://codepen.io/brandonmcconnell/pen/YzOOBVj/66c65611ba8bf3133f1cf87ccfe09c44?editors=0100

[brandonmcconnell]

@romainmenke First bug-ish report! If I do ++0% it falls back to 0 rather than adopting the previous increment.

For example:

.gradient {
  background: conic-gradient(red, blue ++40%, blue ++20%, red ++0%, green ++40%);
  /* …becomes… ❌ */
  background: conic-gradient(red, blue +40%, blue 60%, red 0, green 100%);
  /* …instead of… ✅ */
  background: conic-gradient(red, blue +40%, blue 60%, red 60%, green 100%);
}

as seen in my CodePen example

[Antonio-Laguna]

LGTM! Great work!

I did notice what @brandonmcconnell points here w3c/csswg-drafts#8616 (comment) about -- and such but given this is for fun I don't see it as a need :)

[brandonmcconnell]

@romainmenke @Antonio-Laguna I think the only thing that you might want to consider adding before merging is fixing the ++0{unit} bug I pointed out above ☝🏼

[romainmenke]

@brandonmcconnell That is not a bug :)
These two are equivalents. The 0 will be fixed by browsers and turned into 60%.

  background: conic-gradient(red, blue +40%, blue 60%, red 0, green 100%);
  background: conic-gradient(red, blue +40%, blue 60%, red 60%, green 100%);

---

Thank you all for the feedback!
We'll try to publish this shortly

[romainmenke]

@brandonmcconnell @Afif13 This has now been released and is available here : https://www.npmjs.com/package/@csstools/postcss-gradient-stop-increments-experimental
https://github.com/csstools/postcss-plugins/tree/main/experimental/postcss-gradient-stop-increments#readme

[brandonmcconnell]

@romainmenke Incredible work on this. Thanks!