Awesome

Autoprefixer for Ember CLI

This addon runs the styles of your Ember CLI-project through Autoprefixer.

Compatibility

• Ember.js v3.20 or above
• Ember CLI v3.20 or above
• Node.js v12 or above

Installation

ember install ember-cli-autoprefixer

Options

This addon first consumes your browser list config from config/targets.js. This is the browser list for Babel.

You can manually configure what browsers to target for autoprefixer only. Add the target browsers to your package.json as per https://github.com/browserslist/browserslist#readme, add a .browserslistrc file, or configure overrideBrowsersList in ember-cli-build.js.

// ember-cli-build.js
var app = new EmberApp(defaults, {
  autoprefixer: {
    overrideBrowserslist: ['IE11'],
    cascade: false
  }
});

This would prefix styles as required by the two latest version of ios, and disable the cascade (see below).

You can disable Autoprefixer by passing in enabled: false.

Other options would also go here along with overrideBrowserslist, enabled and cascade.

You can read more about these settings and others over on the Autoprefixer page.

Note on using with ember-cli-sass

Autoprefixer doesn't play well with .css.map files, but it will work with embedded source maps. This means there are two options.

If you want to disable CSS sourcemaps from ember-cli-sass update ember-cli-build.js to

  sassOptions: {
    // This tells ember-cli-sass to avoid generating the sourcemap file (like vendor.css.map)
    sourceMap: false
  }

Alternatively, you may use embedded source maps. So we tell ember-cli-sass to embed the sourcemaps and then turn on sourcemaps with autoprefixer which will update the embedded sourcemap after adding prefixes.

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

Also note you can optionally disable in production!

  const envIsProduction = (process.env.EMBER_ENV === 'production');

  ...

  sassOptions: {
    sourceMap: !envIsProduction,
    sourceMapEmbed: !envIsProduction
  },
  autoprefixer: {
    enabled: true,
    cascade: true,
    sourcemap: !envIsProduction
  }

References

• Autoprefixer
• broccoli-autoprefixer