How to automaticly add css prefixes with Brocolli or EmberJS

Ember uses the Broccoli build tool to build the css and js-files. You can of course use Broccoli without EmberJS.

Here is an example copy pasted out of the Brocfile.js file of my current project (without EmberJS):

// Prefix the css
var prefixedCss = autoprefixer(css, {
  browsers: ['ie 9-11', 'last 2 versions']
});

// Merge and export the whole thing
module.exports = mergeTrees([prefixedCss, js]);

Where css is the Broccoli tree with the already compiled sass to css files. In the browsers-object you can specify which browser you want prefixes for. More docs on the browsers object.

For Broccoli you can use the npm module by sindresorhus. See the broccoli-autoprefixer GitHub-repo.

Note on EmberJS

In EmberJS you should head to the ember-cli addon ember-cli-autoprefixer

Happy coding! – Found a mistake or a typo? Please submit a PR to my GitHub-repo.

Like this post? Follow @adriaandotcom on X