ember-cli-postcss

ember-cli-postcss

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

Installation

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

Usage

The add-on can be used in two ways:

• on individual files, referred to as “compile”
• on all CSS files, referred to as “filter”

Note: it’s possible to use both compile and filter.

Compile

This step will look for either app.css or <project-name>.css in your styles directory. Additional files to be processed can be defined in the output paths configuration object for your application:

var app = new EmberApp(defaults, {
  outputPaths: {
    app: {
      html: 'index.html',
      css: {
        'app': '/assets/app.css',
        'print': '/assets/print.css'
      }
    }
  }
}

Filter

This step will run at the end of the build process on all CSS files, including the merged vendor.css file and any CSS imported into the Broccoli tree by add-ons.

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 ember-cli-build.js

The postcssOptions object should have a “compile” and “filter” (optional) property, which will have the properties enabled and plugins, which is an array of objects that contain a module property and an options property:

postcssOptions: {
  enabled: true, // defaults to true
  compile: {
    plugins: [
      {
        module: <module>,
        options: {
          ...
        }
      }
    ]
  },
  filter: {
    enabled: true, // defaults to false
    plugins: [
      {
        module: <module>,
        options: {
          ...
        }
      }
    ]
  }
}

Example

Install the autoprefixer plugin:

npm i --save-dev autoprefixer

Specify some plugins in your ember-cli-build.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: {
      compile: {
        enabled: false
      },
      filter: {
        enbaled: true,
        plugins: [
          {
            module: autoprefixer,
            options: {
              browsers: ['last 2 version']
            }
          }
        ]
      }
    }
  });
  return app.toTree();
};