Ember CLI Postcss

Transform CSS with JavaScript plugins in Your Ember Apps and Addons

The Benefits

Postcss creates an AST representation of your CSS and then applies transformations to it through a series of plugins. This gives you the stability of using plugins that follow the CSS spec or adding lots of powerful custom transformations to suit your project or development needs.

This addon allows you to use Postcss as your main style processor or use it at the end of the build process to transform your vendor styles as well as your app styles. You can also opt to use both of these processes for greator customization.

With minimal configuration you can setup plugins like autoprefixer or stylehint, to take care of vendor prefixes or lint your styles, respectively.

The postcss library and all of the plugins are written in JavaScript, so you don't need to worry about additional dependencies in other languages.

Getting Started

The easiest way to use Postcss with an Ember application is to use this addon as the main processor for CSS files.

First you'll need to install the addon:

$ ember install ember-cli-postcss

Next you'll want to configure the addon as part of the options for your ember-cli-build.js file. Postcss relies on plugins to transform CSS, so you'll need to specify at least one plugin. In this example we'll use two plugins, one to allow other CSS files to be imported form the filesystem and from npm packages, and another to allow future CSS syntax to be used.

// ember-cli-build.js
module.exports = function (defaults) {
  let app = new EmberAddon(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          { module: require('postcss-import') },
          { module: require('postcss-cssnext') }
        ]
      }
    }
  })
}

Now Postcss will be used to process your app.css file. Further information on advanced usage and all of the available configuration options can be found in the docs or you can browse examples of different use cases in the configuration library.