{"id":16370,"library":"grunt-autoprefixer","title":"Grunt Autoprefixer Plugin","description":"grunt-autoprefixer is a Grunt.js plugin designed to automatically add vendor prefixes to CSS properties using data from the Can I Use database, leveraging the underlying Autoprefixer library (a PostCSS plugin). It simplifies cross-browser compatibility by ensuring CSS rules are correctly prefixed for target browsers without manual intervention. The package is currently at version 3.0.4 and is explicitly marked as deprecated by its maintainers, who recommend transitioning to `grunt-postcss` for future projects and maintenance. `grunt-postcss` provides a more flexible and modern PostCSS-based build pipeline, allowing for `autoprefixer` to be used as one of many PostCSS plugins within the Grunt environment. Its release cadence is effectively halted due to its deprecated status, with no new major versions expected.","status":"deprecated","version":"3.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/ndmitry/grunt-autoprefixer","tags":["javascript","gruntplugin","css","postprocessor","prefix","autoprefixer"],"install":[{"cmd":"npm install grunt-autoprefixer","lang":"bash","label":"npm"},{"cmd":"yarn add grunt-autoprefixer","lang":"bash","label":"yarn"},{"cmd":"pnpm add grunt-autoprefixer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, as it is a Grunt plugin and requires Grunt to run tasks.","package":"grunt","optional":false}],"imports":[{"note":"Grunt plugins are loaded into the Grunt build system, not imported into application code for direct use.","wrong":"const autoprefixer = require('grunt-autoprefixer');","symbol":"Task Loading","correct":"grunt.loadNpmTasks('grunt-autoprefixer');"},{"note":"The primary configuration for Grunt tasks like autoprefixer happens within the `initConfig` object in your Gruntfile.","wrong":"grunt.config.set('autoprefixer', { /* ... */ });","symbol":"Configuration","correct":"grunt.initConfig({\n  autoprefixer: { /* ... */ }\n});"}],"quickstart":{"code":"// Gruntfile.js\nmodule.exports = function(grunt) {\n  grunt.initConfig({\n    pkg: grunt.file.readJSON('package.json'),\n    autoprefixer: {\n      options: {\n        // Specify browsers to target. This can also be done via a .browserslistrc file.\n        browsers: ['last 2 versions', 'ie >= 9', 'safari >= 7'],\n        cascade: true, // Maintain visual cascade for readability\n        remove: true // Remove outdated prefixes\n      },\n      dist: {\n        files: [{\n          expand: true,\n          cwd: 'src/css/',\n          src: '{,*/}*.css',\n          dest: 'dist/css/'\n        }]\n      }\n    }\n  });\n\n  // Load the plugin that provides the \"autoprefixer\" task.\n  grunt.loadNpmTasks('grunt-autoprefixer');\n\n  // Register a default task.\n  grunt.registerTask('default', ['autoprefixer']);\n\n  // To run:\n  // 1. npm install grunt grunt-autoprefixer --save-dev\n  // 2. Create src/css/style.css with some unprefixed CSS like `display: flex;`\n  // 3. Run `npx grunt` in your terminal.\n  // 4. Check dist/css/style.css for prefixed output.\n};","lang":"javascript","description":"This quickstart demonstrates how to install `grunt-autoprefixer`, integrate it into a `Gruntfile.js`, and configure a basic task to process CSS files from `src/css` and output them to `dist/css` with vendor prefixes applied according to specified browser targets."},"warnings":[{"fix":"Refactor your Gruntfile to use `grunt-postcss` and integrate Autoprefixer as a PostCSS plugin. Install `grunt-postcss` and `autoprefixer` (the PostCSS plugin) and update your Grunt configuration accordingly.","message":"This package (`grunt-autoprefixer`) is officially deprecated. The maintainers recommend migrating to `grunt-postcss` for future development and active maintenance.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"If you need to preserve outdated prefixes, explicitly set `options.remove: false` in your `autoprefixer` task configuration to override the new default behavior.","message":"The `options.remove` property, which controls the removal of outdated vendor prefixes, defaults to `true` since Autoprefixer 4.0.0 (which this plugin likely uses internally). This means old, unnecessary prefixes will be stripped by default, potentially altering CSS output for projects previously relying on `remove: false` implicitly.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always explicitly define `options.browsers` in your task configuration or use a `.browserslistrc` file at your project root to ensure accurate targeting. Refer to the `browserslist` documentation for syntax.","message":"The `options.browsers` array determines which browsers to target for prefixing. Misconfiguring this option or omitting it can lead to incorrect or insufficient prefixes, or excessive prefixing for unsupported browsers. The default browserlist might not match project requirements.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure `grunt.loadNpmTasks('grunt-autoprefixer');` is present in your `Gruntfile.js` and run `npm install grunt-autoprefixer --save-dev` to install the plugin.","cause":"The `grunt-autoprefixer` plugin has not been correctly loaded in the Gruntfile, or `npm install` failed to install the package.","error":"Warning: Task 'autoprefixer' not found. Use --force to continue."},{"fix":"Update your `grunt` installation to match the required version, e.g., `npm install grunt@^0.4.2 --save-dev` (adjust version as needed based on the exact peer dependency message).","cause":"The installed version of Grunt does not satisfy the `grunt-autoprefixer` plugin's peer dependency requirement.","error":"Fatal error: Peer dependency `grunt@>=0.4.2` not installed."},{"fix":"Review your `autoprefixer` task options in `Gruntfile.js`, specifically `options.browsers` and `options.remove`. Ensure your `browserslist` query accurately reflects your target browsers. If using `options.map`, ensure it's configured correctly for sourcemap generation.","cause":"Incorrect or missing `options.browsers` configuration, or `options.remove` is set to `false` when removal is desired, or vice-versa, leading to unexpected prefixing behavior.","error":"No prefixes are being added to my CSS! / Too many prefixes are being added, or old prefixes aren't being removed."}],"ecosystem":"npm"}