ember-cli-postcss

ember-cli-postcss

Use postcss to process your css with a large selection of JavaScript plug-ins.

Installation

npm install --save-dev ember-cli-postcss

Usage

The addon is still a little rough around the edges, but it will look for either app.css or <project-name>.css in your styles directory. Postcss requires at least one plug-in to actually do any processing, and so broccoli-postcss will throw an error if at least one is not provided.

Configuring Plug-ins

There are two steps to setting up postcss with ember-cli-postcss:

1. install and require the node modules for any plug-ins
2. provide the node module and plug-in options as a postcssOptions object in the Brocfile

The postcssOptions object should have a property plugins, which is an array of objects that contain a module property and an options property:

postcssOptions: {
  plugins: [
    {
      module: <module>,
      options: {
        ...
      }
    }
  ]
}

Example

Install the autoprefixer plugin:

npm i --save-dev autoprefixer

Specify some plugins in your ember-cli-build.js (or Brocfile.js):

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var autoprefixer = require('autoprefixer');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    postcssOptions: {
      plugins: [
        {
          module: autoprefixer,
          options: {
            browsers: ['last 2 version']
          }
        }
      ]
    }
  });
  return app.toTree();
};

Changelog

2.1.0

• adds the ability to process multiple files by adding them to the outputPaths in Brocfile.js or ember-cli-build.js