postcss / autoprefixer

Parse CSS and add vendor prefixes to rules by Can I Use
https://twitter.com/autoprefixer
MIT License
21.66k stars 1.26k forks source link

Gradient has outdated direction syntax on radial-gradient? #1436

Closed blopa closed 2 years ago

blopa commented 2 years ago

Hey! I'm getting the following error with the latest autoprefixer version, using Webpack 5, and I'm wondering if anyone here could help me out, the error is:

(111:3) autoprefixer: Gradient has outdated direction syntax. New syntax is like `closest-side at 0 0` instead of `0 0, closest-side`.

The CSS in question is this one:

    background:
        linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)),
        linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%) 0 100%,
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)) 0 100%;

Which works just fine, but if I change to the "new syntax", then it doesn't work anymore in the browser.

And according to [this](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient()), the "old" syntax is the correct one.

Where is this warning coming from, and how can I avoid it / fix it?

Thanks, have a good one!

ai commented 2 years ago

Maybe you call Autoprefixer twice and second Autoprefixer complain about old syntax in output of the first one?

blopa commented 2 years ago

Hey. I had a huge css class with 2 declarations of the background property, one of them was wrong 🤦