Fly task to compile styles

fly-styles.task.js

export async function styles() {
  await this.start([ 'stylesSite', 'stylesPages' ], { parallel: true })
}

export async function stylesWatch() {
  await Promise.all([
    this.watch('app/styles/**/{site,_*}.scss', 'stylesSite'),
    this.watch([ 'app/styles/tools/**/_*.scss', 'app/styles/pages/**/*.scss' ], 'stylesPages'),
  ])
}

export async function stylesSite() {
  await this.clear('dist/styles/site*')
  await this.source('app/styles/site.scss')
    .sass(options)
    .target('dist/styles');

  await postcss.call(this, 'dist/styles/site.css', 'dist/styles');
}

export async function stylesPages() {
  await this.clear('dist/styles/pages/**/*'));
  await this
    .source('app/styles/pages/**/*.scss')
    .sass(options)
    .target'dist/styles/pages'));

  await postcss.call(this, 'dist/styles/pages/**/*.css', 'dist/styles/pages');
}

// this is a helper function that processes the css after it's been compiled
// and run the css files through `autoprefixer` and combine the `media queries`
async function postcss(source, target) {
  await this
    .source(source)
    .postcss({
      plugins: [
        require('autoprefixer')({
          browsers: [ 'last 2 versions', '> 5%', 'Android >= 4', 'Chrome >= 40', 'ie >= 10', 'edge >= 12', 'iOS >= 7', ],
          cascade: false
        }),
        require('css-mqpacker')
      ]
    })
    .target(target);

  const cssnano = require('cssnano')({ discardComments: { removeAll: true }, zindex: false });

  await this
    .source(source)
    .filter(extention) // duplicate the file and add the .min extention
    .postcss({ plugins: process.env.PRODUCTION ? [ cssnano ] : [] })
    .target(target);
}