Adding PostCSS/Autoprefixer To The Aurelia CLI

I have been having a bit of fun using the Aurelia CLI. One of the downsides is if you want to use Autoprefixer and PostCSS with something like Stylus, Less or Sass, you can’t choose a preprocessor and use Autoprefixer.

This is easy enough to add in manually and gets you familiar with how the CLI handles task (which use Gulp).

Install development dependencies

Go into your project directory and run the following in your terminal of choice.

npm install gulp-postcss autoprefixer -D

Configuring the CLI

Still in the project directory go into aurelia_project/tasks and open up the file process-css.ts or process-css.js depending on your chosen language.

Inside this file you should see a bunch of imports and a default function called processCSS which we want to replace with the following (I am using Sass, so adjust accordingly if you’re using something else):

import * as postcss from 'gulp-postcss';
import * as autoprefixer from 'autoprefixer';

export default function processCSS() {
    let processors = [
        autoprefixer({ browsers: ['last 1 version'] })
    ];

  return gulp.src(project.cssProcessor.source)
    .pipe(sourcemaps.init())
    .pipe(postcss(processors))
    .pipe(sass().on('error', sass.logError))
    .pipe(build.bundle());
};

I am a huge fan of using Sass with Autoprefixer as you can see. Now I don’t need to worry about vendor prefixes.