Registry / web-framework / ember-cli-autoprefixer

ember-cli-autoprefixer

library2.0.0jsnpmunverified

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.

web-framework devops

npm install ember-cli-autoprefixer

github ↗package ↗

INSTALL

IMPORT

SIG · EMBER-CLI-AUTOPREF

ember-cli-autoprefixer

web-frameworkjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Addon Configuration

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

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

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

✓ autoprefixer: { overrideBrowserslist: ['last 2 versions', '> 1%'] }

✗ autoprefixer: { browsers: ['last 2 versions'] }

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

✓ sassOptions: { sourceMap: true, sourceMapEmbed: true }, autoprefixer: { enabled: true, sourcemap: true }

✗ sassOptions: { sourceMap: true }, autoprefixer: { 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.

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(); };

Debug

Known issues

breakingVersion `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.

affects: >=0.8.0

breakingWith 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: [...] }`.

affects: >=0.7.0

gotchaUsing `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 }`).

affects: all

gotchaPrior 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.

affects: <0.8.1

Errors

Common errors & fixes

Error: Autoprefixer requires Node.js v4 or higher.

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.

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.

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`.

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/kimroen/ember-cli-autoprefixer ↗

packagehttps://www.npmjs.com/package/ember-cli-autoprefixer ↗