Autoprefixer for Ember CLI

2.0.0 · active · verified Wed Apr 22

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.

Common errors

```
Error: Autoprefixer requires Node.js v4 or higher.
```
cause Attempting to build an Ember application with `ember-cli-autoprefixer` `v0.8.0` or higher on an unsupported Node.js version.

fix Upgrade your Node.js environment to version 4 or higher. For optimal compatibility with recent Ember CLI versions, use Node 16+.
```
CSS prefixes (e.g., `-webkit-`, `-moz-`) are not appearing in my browser or production build.
```
cause Autoprefixer is either disabled, configured with incorrect browser targets, or sourcemap issues are preventing it from processing styles correctly.

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.
```
My `browsers` configuration in `ember-cli-build.js` is being ignored by Autoprefixer.
```
cause The `browsers` option for `ember-cli-autoprefixer` was deprecated in `v0.7.0` and no longer functions as expected.

fix Replace `browsers: [...]` with `overrideBrowserslist: [...]` within your `autoprefixer` options in `ember-cli-build.js`, or define your targets in `config/targets.js`.

Warnings

breaking 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.
Fix: Upgrade your Node.js environment to version 4 or higher. For actively maintained Ember CLI projects, Node 16+ is generally recommended.
breaking 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.
Fix: Migrate your browser targets from the `browsers` array within `autoprefixer` options to either `config/targets.js` or use the `overrideBrowserslist` option: `autoprefixer: { overrideBrowserslist: [...] }`.
gotcha 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.
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 }`).
gotcha 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.
Fix: Ensure you are using `ember-cli-autoprefixer` version `0.8.1` or higher to correctly handle asset fingerprinting with autoprefixed styles.

Install

npm install ember-cli-autoprefixer npm
yarn add ember-cli-autoprefixer yarn
pnpm add ember-cli-autoprefixer pnpm

Imports

Addon Configuration

wrong:

import autoprefixer from 'ember-cli-autoprefixer'; // Addons are not imported directly as modules

correct:

var app = new EmberApp(defaults, {
  autoprefixer: {
    overrideBrowserslist: ['IE 11', 'last 2 Chrome versions'],
    cascade: false
  }
});

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.

Browser Targets
wrong:
```
autoprefixer: { browsers: ['last 2 versions'] }
```
correct:
```
autoprefixer: { overrideBrowserslist: ['last 2 versions', '> 1%'] }
```
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+).
Sourcemap with ember-cli-sass
wrong:
```
sassOptions: { sourceMap: true }, autoprefixer: { sourcemap: true }
```
correct:
```
sassOptions: {
  sourceMap: true,
  sourceMapEmbed: true
},
autoprefixer: {
  enabled: true,
  sourcemap: true
}
```
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.

Quickstart

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.

/* In your terminal */
ember install ember-cli-autoprefixer

/* In ember-cli-build.js */
const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  const app = new EmberApp(defaults, {
    // Configure autoprefixer options here
    autoprefixer: {
      // Explicitly define browser targets, overrides config/targets.js for this addon
      overrideBrowserslist: [
        'last 2 Chrome versions',
        'last 2 Firefox versions',
        'last 1 Safari versions',
        'last 2 Edge versions',
        'IE 11' // Example for specific browser
      ],
      cascade: false, // Disable cascade for cleaner output
      enabled: true // Ensure autoprefixer is enabled
    },
    // Example of disabling in production, common practice
    sassOptions: {
      sourceMap: process.env.EMBER_ENV !== 'production',
      sourceMapEmbed: process.env.EMBER_ENV !== 'production'
    }
  });

  return app.toTree();
};

view raw JSON →