gruntjspostcssautoprefixer

Warning: [object Object] is not a PostCSS plugin. GruntJS with autoprefixer


I am trying to use PostCSS plugin autoprefixer with grunt. I have gone through many articles and Stackoverflow answers which were relevant but still I am getting "Warning: [object Object] is not a PostCSS plugin Use --force to continue".

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'css/style.css' : 'scss/style.scss'
                }
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        },
        postcss: {
            options: {
                map: true,
                processors: [
                    require('autoprefixer')()
                ]
            },
            dist: {
                src: 'css/*.css'
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-postcss');
    grunt.registerTask('dev',['sass','watch']);
    grunt.registerTask('build',['sass', 'postcss']);
}

package.json
  "devDependencies": {
    "grunt": "^1.4.0",
    "grunt-contrib-sass": "^2.0.0",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-postcss": "^0.9.0",
    "postcss": "^8.3.0",
    "autoprefixer": "^10.2.6"
  }


I am a newbie so please help.

Solution

  • Not sure yet what the root cause is, but downgrading autoprefixer to version 9 solves the issue

    package.json
      "devDependencies": {
        "grunt": "^1.4.0",
        "grunt-contrib-sass": "^2.0.0",
        "grunt-contrib-watch": "^1.1.0",
        "grunt-postcss": "^0.9.0",
        "postcss": "^8.3.0",
        "autoprefixer": "^9.8.6"
      }