Gradient has outdated direction syntax. New syntax is like "to left" instead of "right".

[KrunchMuffin]

The line is actually
background-image: linear-gradient(top, #fdd49a, #fdf59a);
not sure where right is coming from? Not even using right at all in the file.

v3.0.2 Gulp

[TrySound]

@KrunchMuffin Yeah, a little mistake, but hope you understood. Instead of top you should use to bottom value.

[KrunchMuffin]

Ok, thx. Thought it was to top.

[TrySound]

Need to fix warning

[ai]

@TrySound what we need to fix in warning?

[ai]

I checked warnings. Everything is fine.

[josephrexme]

For me there was neither a right or a top. I had a to right which should be correct considering the to bottom for top. Here's my code:

background-image: linear-gradient(to right, #aaa 80%, #555);

[ai]

@bl4ckdu5t maybe you have some legacy code or CSS from libraries?

[josephrexme]

That was the case exactly. Thanks

[BockwurstJoe]

actually I had the same warning for:
position: absolute;
left: 10px;
right: 10px;
I guess it would not be interpreted correctly if I take to right and to left here :P

[sekoyo]

This error is really getting to me, postcss vendor prefix is outputting:

background-image: -webkit-linear-gradient(top, #78932b, #8cb434);
  background-image: -moz-linear-gradient(top, #78932b, #8cb434);
  background-image: -o-linear-gradient(top, #78932b, #8cb434);
  background-image: linear-gradient(to bottom, #78932b, #8cb434);

Is that not correct? Doesn't it make sense old vendor prefixes have the old syntax?

[ai]

@dominictobias show full text of your warning

[sekoyo]

@ai Not much to go by but here it is! (using latest create-react-app react-scripts):

(2183:3) Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.

./node_modules/neo-core-css/dist/neo-core-css.css (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/neo-core-css/dist/neo-core-css.css)
Warning

That isn't a public NPM module sorry!

[ai]

Maybe it is different line? Your code is correct.

[sekoyo]

@ai whoops, thanks for confirming, I've found the culprit now (y)

[andreas83]

just want to point out, its 2019 and this issue is still helpful. not sure if this is a good or bad thing.

[OttoTrezza]

For me there was neither a right or a top. I had a to right which should be correct considering the to bottom for top. Here's my code:

background-image: linear-gradient(to right, #aaa 80%, #555);

i have this..
-moz-linear-gradient(top, #ffffff, #f0f0f0);
and i change it for...
-moz-linear-gradient(to right, #ffffff, #f0f0f0);

the same error disapear!

[abdullaachilov]

Just to be clear, we should change

top - > to bottom
left - > to right
right - > to left ??

[ai]

@abdullaachilov yeap

[dragoscv]

Just to be clear, we should change

top - > to bottom
left - > to right
right - > to left ??

2022 and this post still helpful

[KrunchMuffin]

And green means stop and red means go. Glad I could be of assistance all these years later. 😁