How to use postcss plugins like autoprefixer

[neilhem]

Hi, is there any way to process css files with postcss plugin like autoprefixer?

[griezma]

Not sure if this is the best way, but it works...

In angular-cli-build.js:

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
var autoprefixer = require('broccoli-autoprefixer');  // add autoprefixer
module.exports = function(defaults) {
  var app = new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/*.js',
      'es6-shim/es6-shim.js',
      'reflect-metadata/*.js',
      'rxjs/**/*.js',
      '@angular/**/*.js'
    ]
  });
  return autoprefixer(app, { browsers: ['last 2 version'] }); // use autoprefixer
};

[damsorian]

I need also to integrate postcss-import and postcss-cssnext

[SethDavenport]

Heavy PostCSS/CSSNext/Autoprefixer user as well - very easy to set up with webpack. Would love some docs or insight on how to use this toolchain with angular-cli.

[d99m]

@SethDavenport I'm working with a similar stack, here are relevant parts of my angular-cli-build.js file.

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

var postcss = require('broccoli-postcss');

var atImport = require('postcss-import');
var customMedia = require('postcss-custom-media');
var customProps = require('postcss-custom-properties');
var calc = require('postcss-calc');
var discardComments = require('postcss-discard-comments');
var removeRoot = require('postcss-remove-root');
var autoprefixer = require('autoprefixer');

module.exports = function (defaults) {
  var app = new Angular2App(defaults, {
    vendorNpmFiles: [
      /* Vendor stuff */
    ]
  });

  var cssOptions = {
    plugins: [
      {
        module: atImport,
        options: {
          path: ['src/client/css/'], // A way to import custom CSS modules, given they're in this directory and are module-name/index.css
          plugins: [] // this has to be set, otherwise atImport plugin flops, no idea why
        }
      },
      {
        module: discardComments
      },
      {
        module: customMedia
      },
      {
        module: customProps
      },
      {
        module: calc
      },
      {
        module: removeRoot
      },
      {
        module: autoprefixer // your prefixer settings here
      }
    ]
  };

  return postcss(app, cssOptions);
};

[SethDavenport]

Thanks, I'll give that a try. Time to learn what broccolis is :)

[damsorian]

@knikel that works for me, thanks!

[drejohnson]

Thanks @knikel This should be documented. The ability to use PostCSS is awesome.

[pavel06081991]

Hello, what about sugarss? how to use sugarss parser?

[pavel06081991]

And how to exclude css files of external libs? now I have:

module.exports = function(defaults) {
  var app = new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/*.js',
      'es6-shim/es6-shim.js',
      'reflect-metadata/*.js',
      'rxjs/**/*.js',
      '@angular/**/*.js',
      'lodash/lodash.js',
      'primeng/**/*',
      'primeui/**/*',
      'moment/moment.js',
      'ng2-bootstrap/**/*.js'
    ]
  });

  var cssOptions = {
    plugins: [
      {
        module: $.autoprefixer,
        options: {
          browsers: ['> 5%']
        }
      }
    ]
  };

  return $.postcss(app, cssOptions);

and postcss compiles css of all external libs such as primeui