@keyframes rules within Media Queries aren't prefixed

[maximelebreton]

Hi, and first of all, thx for your amazing job !

So, everything is working fine except one thing.

The css @keyframes rules.

I use grunt-autoprefixer 0.4.1 with these parameters : browsers: ['last 2 version', 'ie 9', 'ios 5'] So i want -webkit prefixes.

I have no issues with css properties like animation-delay, animation-fill-mode etc...

But for example, with this source :

@keyframes FadeIn {
    100% {
      opacity: 1;
    }
}

the generated code should be :

@keyframes FadeIn {
    100% {
      opacity: 1;
    }
}
@-webkit-keyframes FadeIn {
    100% {
      opacity: 1;
    }
}

But it's not... No prefixes for @keyframes... Have you any ideas ?

Thanks.

[nDmitry]

Hi, can't reproduce your issue with this config:

module.exports = function(grunt) {

    'use strict';

    grunt.initConfig({
        autoprefixer: {
            options: {
                browsers: ['last 2 version', 'ie 9', 'ios 5']
            },
            dist: {
                src: ['test.css']
            }
        }
    });

    grunt.loadNpmTasks('grunt-autoprefixer');
};

It's really weird though. Did you try to reinstall the plugin?

[maximelebreton]

Ok i got it.

My @keyframe rule was in a media query

@media only screen and (min-width: 40.063em) {
  @keyframes FadeIn {
    100% {
      opacity: 1;
    }
  }
}

So I tried to put it outside and now it works :)

Can you reproduce this issue ?

[nDmitry]

Yes, now I can. Please open another issue here.