Autoprefixing using Grunt + PostCSS

Question

I'm using Sass and rather than create a mixin I'm trying to use grunt-postcss to add my vendor prefixes on my class definitions...

this is my css

@keyframes {
    from { transform:scale(1); }
      to { transform:scale(2); }
}

My gruntfile

watch:{
        sass: {
            files: ["sass/partials/*.scss","sass/*.scss"],
            tasks:['sass','postcss']
        }
    },
    sass :{
        dev: {
            files: {
                "web/css/styles.css" :  "sass/demo.scss"
            }
        }
    },
    postcss :{
        options: {
            processors:[
                require('autoprefixer-core')({browsers:'>5%'})
            ]
        },
        dist: {
            src: 'web/css/*.css'
        }
    },

But the final file doesn't have the prefixes. What am i doing wrong?

[UPDATE]

i tried changing the

dist: {
   src:
}

to

dist : { files: {}}

but still didn't work is this a bug? i note that no one has tried to use the @keyframes definitions before

[UPDATE]

while running the task postcss:dist I am getting and error

Fatal Error: undefined is not a function

Am i missing something here?

Is it that I need to prepend some notation to my sass to get it to recognize prefixing style properties? i tried using ":" but sass runs into an error — Kendall, Jun 21 '15 at 01:44
I'm not using `@keyframes` but I am having the same problems. I have gotten the task to run without errors, but no prefixes have been applied. — Steve Meisner, Jul 14 '15 at 00:34

score 3 · Answer 1 · answered Jun 23 '15 at 14:08

3

I think your Grunt file notation is incorrect. Try this:

dist: {
            files: [{
                expand: true,
                cwd: 'web/css/',
                src: ['**/*.css'],
                dest: 'web/css/'
            }]
        }

answered Jun 23 '15 at 14:08

srlm

3,186
2
27
40

score 0 · Answer 2 · answered Jul 11 '16 at 00:14

The following worked for me:

grunt.initConfig({

  sass: {
    dist: {
      files: {
          'assets/css/style.css': 'assets/sass/style.scss'
      }
    }
  },

  postcss: {
    options: {
      map: true,
      processors: [
        require('autoprefixer')({
          browsers: ['last 2 versions']
        })
      ]
    },
    dist: {
      src: 'assets/css/style.css'
    }
  },

  watch: {
    styles: {
      files: ['assets/sass/*.scss', 'assets/sass/common/*.scss'],
      tasks: ['sass','postcss']
    }
  }

});

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', ['sass', 'watch']);
grunt.registerTask('default', ['sass', 'postcss']);

score -1 · Answer 3 · answered Aug 25 '15 at 22:04

-1

You don't have a name of animation

@keyframes zoom{
    from { transform:scale(1); }
      to { transform:scale(2); }
}

answered Aug 25 '15 at 22:04

wenom64

1

1

While this is true, Sass doesn't raise an error with the code posted by the OP. Since Autoprefixer will happily prefix invalid keyframes declarations (tested on codepen), I find it unlikely that this is the answer. – cimmanon Aug 25 '15 at 22:10

Autoprefixing using Grunt + PostCSS

3 Answers3