bug - postcss-minify-gradients #386

soda-x · 2017-07-14T09:15:25Z

I found there is a bug during using css-nano - postcss-minify-gradients to process css gradient .

Here is my less file.

@ratio:1/200;
@lightFrom: -10%;
@lightTo: 110%;
@section: (@lightTo - @lightFrom)/20;
@lightColor:rgba(178, 238, 121, 0.62);
@lightColor: #fff;
@lightRadius:40%;
@lightSize: 1;
@lightScale: 2.6;
@keyframes flash-anim{
  0%{
    background: -webkit-radial-gradient(50% 0*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.0);
  }
  5%{
    background: -webkit-radial-gradient(50% 1*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.1);
  }
  10%{
    background: -webkit-radial-gradient(50% 2*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.2);
  }
  15%{
    background: -webkit-radial-gradient(50% 3*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.3);
  }
  20%{
    background: -webkit-radial-gradient(50% 4*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.4);
  }
  25%{
    background: -webkit-radial-gradient(50% 5*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.5);
  }
  30%{
    background: -webkit-radial-gradient(50% 6*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.6);
  }
  35%{
    background: -webkit-radial-gradient(50% 7*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.7);
  }
  40%{
    background: -webkit-radial-gradient(50% 8*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.8);
  }
  45%{
    background: -webkit-radial-gradient(50% 9*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.9);
  }
  50%{
    background: -webkit-radial-gradient(50% 10*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*1);
  }
  55%{
    background: -webkit-radial-gradient(50% 11*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.9);
  }
  60%{
    background: -webkit-radial-gradient(50% 12*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.8);
  }
  65%{
    background: -webkit-radial-gradient(50% 13*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.7);
  }
  70%{
    background: -webkit-radial-gradient(50% 14*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.6);
  }
  75%{
    background: -webkit-radial-gradient(50% 15*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.5);
  }
  80%{
    background: -webkit-radial-gradient(50% 16*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.4);
  }
  85%{
    background: -webkit-radial-gradient(50% 17*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.3);
  }
  90%{
    background: -webkit-radial-gradient(50% 18*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.2);
  }
  95%{
    background: -webkit-radial-gradient(50% 19*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*.1);
  }
  100%{
    background: -webkit-radial-gradient(50% 20*@section+@lightFrom, circle, @lightColor, rgba(255, 255, 255, 0) @lightRadius*0);
  }
}

.flash-anim{
  animation: flash-anim .5s 1;
}

after css-nano - postcss-minify-gradients

Please notice the diff the value greater than 25%, the final value decreases to 0，it`s so weird.

@keyframes flash-anim {
  0% {
    background: -webkit-radial-gradient(50% -10%,circle,#fff,hsla(0,0%,100%,0) 0);
  }

  5% {
    background: -webkit-radial-gradient(50% -4%,circle,#fff,hsla(0,0%,100%,0) 4%);
  }

  10% {
    background: -webkit-radial-gradient(50% 2%,circle,#fff,hsla(0,0%,100%,0) 8%);
  }

  15% {
    background: -webkit-radial-gradient(50% 8%,circle,#fff,hsla(0,0%,100%,0) 12%);
  }

  20% {
    background: -webkit-radial-gradient(50% 14%,circle,#fff,hsla(0,0%,100%,0) 16%);
  }


  30% {
    background: -webkit-radial-gradient(50% 26%,circle,#fff,hsla(0,0%,100%,0) 0);
  }

  35% {
    background: -webkit-radial-gradient(50% 32%,circle,#fff,hsla(0,0%,100%,0) 0);
  }

  40% {
    background: -webkit-radial-gradient(50% 38%,circle,#fff,hsla(0,0%,100%,0) 0);
  }

  45% {
    background: -webkit-radial-gradient(50% 44%,circle,#fff,hsla(0,0%,100%,0) 0);
  }

  50% {
    background: -webkit-radial-gradient(50% 50%,circle,#fff,hsla(0,0%,100%,0) 0);
  }

  55% {
    background: -webkit-radial-gradient(50% 56%,circle,#fff,hsla(0,0%,100%,0) 0);
  }

  60% {
    background: -webkit-radial-gradient(50% 62%,circle,#fff,hsla(0,0%,100%,0) 0);
  }

  65% {
    background: -webkit-radial-gradient(50% 68%,circle,#fff,hsla(0,0%,100%,0) 0);
  }

  70% {
    background: -webkit-radial-gradient(50% 74%,circle,#fff,hsla(0,0%,100%,0) 0);
  }

  75% {
    background: -webkit-radial-gradient(50% 80%,circle,#fff,hsla(0,0%,100%,0) 0);
  }

  80% {
    background: -webkit-radial-gradient(50% 86%,circle,#fff,hsla(0,0%,100%,0) 0);
  }

  85% {
    background: -webkit-radial-gradient(50% 92%,circle,#fff,hsla(0,0%,100%,0) 0);
  }

  90% {
    background: -webkit-radial-gradient(50% 98%,circle,#fff,hsla(0,0%,100%,0) 0);
  }

  95% {
    background: -webkit-radial-gradient(50% 104%,circle,#fff,hsla(0,0%,100%,0) 0);
  }

  to {
    background: -webkit-radial-gradient(50% 110%,circle,#fff,hsla(0,0%,100%,0) 0);
  }
}

.flash-anim {
  animation: flash-anim .5s 1;
}

The solution now I could offer is to disable the postcss-minify-gradients.

Setting css-loader minimize an option postcss-minify-gradients to false.

Like minimize: { postcss-minify-gradients: false }

The text was updated successfully, but these errors were encountered:

xiestrikerzj · 2017-07-14T09:34:03Z

the latest param of -webkit-radial-gradient is set to 0 since 25%, how can i do in my code to avoid this error?

TimRChen · 2017-07-14T09:42:15Z

You can set minifyGradients to false. use optimize-css-assets-webpack-plugin to configuration cssnano.

ben-eb · 2017-07-16T17:55:25Z

Would it be possible to see the CSS output after it has been compiled through your preprocessor (but before cssnano)?

soda-x · 2017-07-17T02:07:26Z

@ben-eb Of course.

Here is the output compiled through my preprocessor without cssnano

@-webkit-keyframes flash-anim {
  0% {
    background: -webkit-radial-gradient(50% -10%,circle,#fff,rgba(255,255,255,0) 0);
  }

  5% {
    background: -webkit-radial-gradient(50% -4%,circle,#fff,rgba(255,255,255,0) 4%);
  }

  10% {
    background: -webkit-radial-gradient(50% 2%,circle,#fff,rgba(255,255,255,0) 8%);
  }

  15% {
    background: -webkit-radial-gradient(50% 8%,circle,#fff,rgba(255,255,255,0) 12%);
  }

  20% {
    background: -webkit-radial-gradient(50% 14%,circle,#fff,rgba(255,255,255,0) 16%);
  }

  25% {
    background: -webkit-radial-gradient(50% 20%,circle,#fff,rgba(255,255,255,0) 20%);
  }

  30% {
    background: -webkit-radial-gradient(50% 26%,circle,#fff,rgba(255,255,255,0) 24%);
  }

  35% {
    background: -webkit-radial-gradient(50% 32%,circle,#fff,rgba(255,255,255,0) 28%);
  }

  40% {
    background: -webkit-radial-gradient(50% 38%,circle,#fff,rgba(255,255,255,0) 32%);
  }

  45% {
    background: -webkit-radial-gradient(50% 44%,circle,#fff,rgba(255,255,255,0) 36%);
  }

  50% {
    background: -webkit-radial-gradient(50% 50%,circle,#fff,rgba(255,255,255,0) 40%);
  }

  55% {
    background: -webkit-radial-gradient(50% 56%,circle,#fff,rgba(255,255,255,0) 36%);
  }

  60% {
    background: -webkit-radial-gradient(50% 62%,circle,#fff,rgba(255,255,255,0) 32%);
  }

  65% {
    background: -webkit-radial-gradient(50% 68%,circle,#fff,rgba(255,255,255,0) 28%);
  }

  70% {
    background: -webkit-radial-gradient(50% 74%,circle,#fff,rgba(255,255,255,0) 24%);
  }

  75% {
    background: -webkit-radial-gradient(50% 80%,circle,#fff,rgba(255,255,255,0) 20%);
  }

  80% {
    background: -webkit-radial-gradient(50% 86%,circle,#fff,rgba(255,255,255,0) 16%);
  }

  85% {
    background: -webkit-radial-gradient(50% 92%,circle,#fff,rgba(255,255,255,0) 12%);
  }

  90% {
    background: -webkit-radial-gradient(50% 98%,circle,#fff,rgba(255,255,255,0) 8%);
  }

  95% {
    background: -webkit-radial-gradient(50% 104%,circle,#fff,rgba(255,255,255,0) 4%);
  }

  100% {
    background: -webkit-radial-gradient(50% 110%,circle,#fff,rgba(255,255,255,0) 0);
  }
}

@keyframes flash-anim {
  0% {
    background: -webkit-radial-gradient(50% -10%,circle,#fff,rgba(255,255,255,0) 0);
  }

  5% {
    background: -webkit-radial-gradient(50% -4%,circle,#fff,rgba(255,255,255,0) 4%);
  }

  10% {
    background: -webkit-radial-gradient(50% 2%,circle,#fff,rgba(255,255,255,0) 8%);
  }

  15% {
    background: -webkit-radial-gradient(50% 8%,circle,#fff,rgba(255,255,255,0) 12%);
  }

  20% {
    background: -webkit-radial-gradient(50% 14%,circle,#fff,rgba(255,255,255,0) 16%);
  }

  25% {
    background: -webkit-radial-gradient(50% 20%,circle,#fff,rgba(255,255,255,0) 20%);
  }

  30% {
    background: -webkit-radial-gradient(50% 26%,circle,#fff,rgba(255,255,255,0) 24%);
  }

  35% {
    background: -webkit-radial-gradient(50% 32%,circle,#fff,rgba(255,255,255,0) 28%);
  }

  40% {
    background: -webkit-radial-gradient(50% 38%,circle,#fff,rgba(255,255,255,0) 32%);
  }

  45% {
    background: -webkit-radial-gradient(50% 44%,circle,#fff,rgba(255,255,255,0) 36%);
  }

  50% {
    background: -webkit-radial-gradient(50% 50%,circle,#fff,rgba(255,255,255,0) 40%);
  }

  55% {
    background: -webkit-radial-gradient(50% 56%,circle,#fff,rgba(255,255,255,0) 36%);
  }

  60% {
    background: -webkit-radial-gradient(50% 62%,circle,#fff,rgba(255,255,255,0) 32%);
  }

  65% {
    background: -webkit-radial-gradient(50% 68%,circle,#fff,rgba(255,255,255,0) 28%);
  }

  70% {
    background: -webkit-radial-gradient(50% 74%,circle,#fff,rgba(255,255,255,0) 24%);
  }

  75% {
    background: -webkit-radial-gradient(50% 80%,circle,#fff,rgba(255,255,255,0) 20%);
  }

  80% {
    background: -webkit-radial-gradient(50% 86%,circle,#fff,rgba(255,255,255,0) 16%);
  }

  85% {
    background: -webkit-radial-gradient(50% 92%,circle,#fff,rgba(255,255,255,0) 12%);
  }

  90% {
    background: -webkit-radial-gradient(50% 98%,circle,#fff,rgba(255,255,255,0) 8%);
  }

  95% {
    background: -webkit-radial-gradient(50% 104%,circle,#fff,rgba(255,255,255,0) 4%);
  }

  100% {
    background: -webkit-radial-gradient(50% 110%,circle,#fff,rgba(255,255,255,0) 0);
  }
}

soda-x · 2017-07-17T09:20:46Z

@ben-eb I made a PR. Please review it ASAP. Thanks. XD

ben-eb · 2017-07-17T13:49:07Z

It's possible that the original syntax has an error in it, if you have a look at the spec:

https://drafts.csswg.org/css-images-3/#radial-gradient-syntax

radial-gradient() = radial-gradient(
  [ <ending-shape> || <size> ]? [ at <position> ]? ,
  <color-stop-list>
)

Whereas your gradients are defined like:

background: -webkit-radial-gradient(50% -10%, circle, #fff, hsla(0,0%,100%,0) 0);

I think that this needs to be changed to:

background: -webkit-radial-gradient(circle at 50% -10%, #fff, hsla(0,0%,100%,0) 0);

In other words when supplying a <position> value for a gradient, the at is required. Hope this helps.

soda-x · 2017-07-17T14:35:35Z

@ben-eb

the standard syntax defined like

background: radial-gradient(circle at 50% -10%, #fff, hsla(0,0%,100%,0) 0);

no prefix -webkit

But for Safari Opera Firefox compatibility it`s ok defined like

background: -webkit-radial-gradient(50% -10%, circle, #fff, hsla(0,0%,100%,0) 0);
background: -o-radial-gradient(50% -10%, circle, #fff, hsla(0,0%,100%,0) 0);
background: -moz-radial-gradient(50% -10%, circle, #fff, hsla(0,0%,100%,0) 0);

I think cssnano should enhance this code

Just need to check the arg[1] is a color or not.

What`s your opinion?

If you agree with me, I can make a pr.

ben-eb · 2017-07-17T14:44:17Z

Ah so the parameters are different from the specification? In this case I'm happy to support different logic for these cases. We could have separate block(s) for prefixed radial gradients, e.g:

if (
  node.value === '-webkit-radial-gradient' ||
  node.value === '-webkit-repeating-linear-gradient'
) {
  // custom logic
}

Would you like to update your pull request with this?

Edit: https://webkit.org/blog/1424/css3-gradients/ might be helpful as documentation for the old syntax.

soda-x · 2017-07-17T14:51:12Z

OK！ It`s my pleasure.

Tomorrow I will update my PR.

Edit: I will update this PR at this weekend.

soda-x · 2017-07-25T07:35:34Z

Updated my PR.

I developed a small package called is-color-stop to check if the string is a color-stop string.

If you have any further questions please don’t hesitate to contact me.

andyjansson added the bug label Jul 14, 2017

soda-x added a commit to soda-x/cssnano that referenced this issue Jul 17, 2017

fix: postcss-minify-gradients, Close cssnano#386

077f118

ben-eb closed this as completed Jul 17, 2017

ben-eb removed the bug label Jul 17, 2017

ben-eb reopened this Jul 17, 2017

ben-eb added the bug label Jul 17, 2017

ben-eb closed this as completed in 604d903 Jul 27, 2017

NMFR mentioned this issue Jan 25, 2018

Incorrect transformation with semi transparent composited radial gradient NMFR/optimize-css-assets-webpack-plugin#30

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug - postcss-minify-gradients #386

bug - postcss-minify-gradients #386

soda-x commented Jul 14, 2017 •

edited

Loading

xiestrikerzj commented Jul 14, 2017

TimRChen commented Jul 14, 2017

ben-eb commented Jul 16, 2017

soda-x commented Jul 17, 2017

soda-x commented Jul 17, 2017

ben-eb commented Jul 17, 2017

soda-x commented Jul 17, 2017 •

edited

Loading

ben-eb commented Jul 17, 2017 •

edited

Loading

soda-x commented Jul 17, 2017 •

edited

Loading

soda-x commented Jul 25, 2017 •

edited

Loading

bug - postcss-minify-gradients #386

bug - postcss-minify-gradients #386

Comments

soda-x commented Jul 14, 2017 • edited Loading

xiestrikerzj commented Jul 14, 2017

TimRChen commented Jul 14, 2017

ben-eb commented Jul 16, 2017

soda-x commented Jul 17, 2017

soda-x commented Jul 17, 2017

ben-eb commented Jul 17, 2017

soda-x commented Jul 17, 2017 • edited Loading

ben-eb commented Jul 17, 2017 • edited Loading

soda-x commented Jul 17, 2017 • edited Loading

soda-x commented Jul 25, 2017 • edited Loading

soda-x commented Jul 14, 2017 •

edited

Loading

soda-x commented Jul 17, 2017 •

edited

Loading

ben-eb commented Jul 17, 2017 •

edited

Loading

soda-x commented Jul 17, 2017 •

edited

Loading

soda-x commented Jul 25, 2017 •

edited

Loading