Troubles with a radial-gradient

[talyguryn]

For an Instagram button I use:

background: radial-gradient(farthest-corner at 40px 70px, #FEE081 0%, #F87825 24%, #DB2B75 49%, #A32B98 66%, #4B62D6 100%);

After building:

background: radial-gradient(farthest-corner at 40px,at 70px,#fee081 0,#f87825 24%,#db2b75 49%,#a32b98 66%,#4b62d6 100%)

Changes:

at 40px 70px --> at 40px,at 70px

And browser does not get it:

Config

postcss-preset-env@6.6.0

Here is my .postcssrc.yml.

plugins:
  postcss-preset-env:
    stage: 0
    browsers:
      - 'last 2 versions'
      - '> 1%'
    preserve: false

I can disable gradient feature. With the following config this line does not affected then it works correctly.

plugins:
  postcss-preset-env:
    stage: 0
    browsers:
      - 'last 2 versions'
      - '> 1%'
    preserve: false
+    features:
+      double-position-gradients: false

---

Is it a double-position-gradients plugin troubles?

[jonathantneal]

Yes, it seems like the issue would be with https://github.com/jonathantneal/postcss-double-position-gradients and I could use some help debugging it from there. One thing that might help me and others debug this is a minimal, isolated reproduction of the issue in a repository.

[mtelgkamp]

I stumbled upon the same problem and created a small gist with a minimal reproduction.
https://gist.github.com/mtelgkamp/c6afc3aa3d83239ae016372938f7c01c
I used the example for Non-centered gradient from MDN web docs

[romainmenke]

@talyguryn I moved this issue to new mono repo : csstools/postcss-plugins#85

We'll try to get this resolved!