{"id":16986,"library":"ember-cli-autoprefixer","title":"Autoprefixer for Ember CLI","description":"ember-cli-autoprefixer is an Ember CLI addon designed to automatically add vendor prefixes to CSS rules in Ember applications, leveraging the popular PostCSS plugin Autoprefixer. It integrates directly into the Ember CLI build pipeline, processing stylesheets before they are served. The current stable version is 2.0.0. While it doesn't have a fixed release cadence, updates typically align with major releases of `broccoli-autoprefixer`, Autoprefixer itself, or significant changes in Ember CLI's build system (e.g., `config/targets.js`). Key differentiators include its seamless integration, automatic consumption of project-wide browser targets defined in `config/targets.js`, and explicit support for overriding browser targets or configuring Autoprefixer options directly within `ember-cli-build.js`. It also provides detailed guidance for managing CSS sourcemaps, especially when used in conjunction with `ember-cli-sass`, to prevent common build and debugging issues.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"git://github.com/kimroen/ember-cli-autoprefixer","tags":["javascript","ember-addon","autoprefixer","css","prefix","preprocess"],"install":[{"cmd":"npm install ember-cli-autoprefixer","lang":"bash","label":"npm"},{"cmd":"yarn add ember-cli-autoprefixer","lang":"bash","label":"yarn"},{"cmd":"pnpm add ember-cli-autoprefixer","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Ember CLI addons are configured by passing an options object to the `EmberApp` constructor in `ember-cli-build.js`, not via direct JavaScript `import` or `require` statements.","wrong":"import autoprefixer from 'ember-cli-autoprefixer'; // Addons are not imported directly as modules","symbol":"Addon Configuration","correct":"var app = new EmberApp(defaults, {\n  autoprefixer: {\n    overrideBrowserslist: ['IE 11', 'last 2 Chrome versions'],\n    cascade: false\n  }\n});"},{"note":"The `browsers` option was deprecated in `v0.7.0` in favor of `overrideBrowserslist` for explicit addon configuration, or defining browser targets project-wide in `config/targets.js` (Ember CLI 2.13+).","wrong":"autoprefixer: { browsers: ['last 2 versions'] }","symbol":"Browser Targets","correct":"autoprefixer: { overrideBrowserslist: ['last 2 versions', '> 1%'] }"},{"note":"When using `ember-cli-sass` with `autoprefixer.sourcemap: true`, it is crucial to set `sassOptions.sourceMapEmbed: true` to prevent sourcemap corruption or issues with separate sourcemap files.","wrong":"sassOptions: { sourceMap: true }, autoprefixer: { sourcemap: true }","symbol":"Sourcemap with ember-cli-sass","correct":"sassOptions: {\n  sourceMap: true,\n  sourceMapEmbed: true\n},\nautoprefixer: {\n  enabled: true,\n  sourcemap: true\n}"}],"quickstart":{"code":"/* In your terminal */\nember install ember-cli-autoprefixer\n\n/* In ember-cli-build.js */\nconst EmberApp = require('ember-cli/lib/broccoli/ember-app');\n\nmodule.exports = function(defaults) {\n  const app = new EmberApp(defaults, {\n    // Configure autoprefixer options here\n    autoprefixer: {\n      // Explicitly define browser targets, overrides config/targets.js for this addon\n      overrideBrowserslist: [\n        'last 2 Chrome versions',\n        'last 2 Firefox versions',\n        'last 1 Safari versions',\n        'last 2 Edge versions',\n        'IE 11' // Example for specific browser\n      ],\n      cascade: false, // Disable cascade for cleaner output\n      enabled: true // Ensure autoprefixer is enabled\n    },\n    // Example of disabling in production, common practice\n    sassOptions: {\n      sourceMap: process.env.EMBER_ENV !== 'production',\n      sourceMapEmbed: process.env.EMBER_ENV !== 'production'\n    }\n  });\n\n  return app.toTree();\n};","lang":"javascript","description":"This quickstart installs the addon and demonstrates basic configuration in `ember-cli-build.js`, including setting browser targets and managing sourcemap generation based on the environment."},"warnings":[{"fix":"Upgrade your Node.js environment to version 4 or higher. For actively maintained Ember CLI projects, Node 16+ is generally recommended.","message":"Version `0.8.0` updated `broccoli-autoprefixer` to version 5 (and Autoprefixer to version 7), which raised the minimum Node.js requirement to Node 4 or higher. Older Node.js versions will fail to build.","severity":"breaking","affected_versions":">=0.8.0"},{"fix":"Migrate your browser targets from the `browsers` array within `autoprefixer` options to either `config/targets.js` or use the `overrideBrowserslist` option: `autoprefixer: { overrideBrowserslist: [...] }`.","message":"With Ember-CLI 2.13 and `ember-cli-autoprefixer` `v0.7.0`, the `browsers` option in `ember-cli-build.js` was deprecated in favor of a project-wide `config/targets.js` file or the addon-specific `overrideBrowserslist` option.","severity":"breaking","affected_versions":">=0.7.0"},{"fix":"To resolve sourcemap conflicts, either disable CSS sourcemaps for `ember-cli-sass` entirely (`sassOptions: { sourceMap: false }`), or enable embedded sourcemaps for both (`sassOptions: { sourceMap: true, sourceMapEmbed: true }`, `autoprefixer: { sourcemap: true }`).","message":"Using `ember-cli-autoprefixer` with `ember-cli-sass` can lead to sourcemap issues if not configured correctly. Specifically, generating separate `.css.map` files from Sass can conflict with Autoprefixer's processing.","severity":"gotcha","affected_versions":"all"},{"fix":"Ensure you are using `ember-cli-autoprefixer` version `0.8.1` or higher to correctly handle asset fingerprinting with autoprefixed styles.","message":"Prior to `v0.8.1`, there was an issue where asset fingerprinting might not correctly account for autoprefixed styles, potentially leading to inconsistent assets in production builds.","severity":"gotcha","affected_versions":"<0.8.1"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Upgrade your Node.js environment to version 4 or higher. For optimal compatibility with recent Ember CLI versions, use Node 16+.","cause":"Attempting to build an Ember application with `ember-cli-autoprefixer` `v0.8.0` or higher on an unsupported Node.js version.","error":"Error: Autoprefixer requires Node.js v4 or higher."},{"fix":"Verify `autoprefixer: { enabled: true }` in `ember-cli-build.js`. Check `overrideBrowserslist` or `config/targets.js` for correct browser definitions. If using `ember-cli-sass`, review sourcemap configuration as per the warnings.","cause":"Autoprefixer is either disabled, configured with incorrect browser targets, or sourcemap issues are preventing it from processing styles correctly.","error":"CSS prefixes (e.g., `-webkit-`, `-moz-`) are not appearing in my browser or production build."},{"fix":"Replace `browsers: [...]` with `overrideBrowserslist: [...]` within your `autoprefixer` options in `ember-cli-build.js`, or define your targets in `config/targets.js`.","cause":"The `browsers` option for `ember-cli-autoprefixer` was deprecated in `v0.7.0` and no longer functions as expected.","error":"My `browsers` configuration in `ember-cli-build.js` is being ignored by Autoprefixer."}],"ecosystem":"npm","meta_description":null}