Aurelia build CSS modules Gulp task

/*
* This produces a single css file that is then required in app.html
* The individual styles for each component are imported as a json object by 
* import * as css from './xxxxxx.css.json' in TypeScript (you get an error but this still works).
* Then in the constructor assign css to a styles property i.e. this.styles = css;
* I usually then add styles to elements by string interpolation in the html template e.g. class="${styles.cssStyle}"
*/

let gulp = require('gulp');
let gutil = require('gulp-util');
let through = require('through2');
let rename = require('gulp-rename');
let paths = require('../paths');
let changedInPlace = require('gulp-changed-in-place');
let sourcemaps = require('gulp-sourcemaps');
let postcss = require('gulp-postcss');
let atImport = require("postcss-import");
let cssvalues = require('postcss-modules-values');
let cssurl = require('postcss-url');
let cssnext = require('postcss-cssnext');
let initial = require('postcss-initial');
let cssmodules = require('postcss-modules');
let concat = require('gulp-concat-css');
let csso = require('gulp-csso');

// A jagged array that defines the css module classes used in components, each module is represented by a string array of class names
// This allows csso to minify and combine duplicate style definitions while preserving the module id class names
let modules = [];

// small gulp plugin to generate the array used in the gulp-csso scopes option csso({usage: {scopes: []}}), populates the modules jagged array which is passed in as a param
let scopedClasses = function (modules) {

    function bufferContents(file, enc, cb) {

        let module = require(file.path + '.json');
        let classes = Object.values(module)
        ////gutil.log(file.path);
        ////gutil.log(classes);
        if (classes.length > 0) {
            modules.push(classes.map(function (val) {
                return val.split(' ', 1)[0];
            }));
        }
        ////gutil.log('Current module list:');
        ////gutil.log(modules);
        cb(null, file) // Pass the unmodified file back out
    }

    return through.obj(bufferContents);
};

gulp.task('process-css', function () {
    let processors = [
        atImport({ addModulesDirectories: ['wwwroot/jspm_packages/npm']/*, path: ["wwwroot/jspm_packages/npm"] */}),
        cssvalues(),
        //cssurl(),
        cssnext(),
        initial(),
        cssmodules({
            globalModulePaths: ['jspm_packages', 'styles'],
            generateScopedName: '[name]__[local]___[hash:base64:5]'
        })
    ];

    return gulp.src([paths.appRoot + 'assets/styles/app.css' ,paths.css]) // Ensure app.css is first as this file imports vendor css dependancies which may need overriding
        .pipe(changedInPlace({ firstPass: true }))
        .pipe(postcss(processors))
        .pipe(scopedClasses(modules))
        .pipe(concat('assets/styles/bundle.css'))
        .pipe(sourcemaps.init())
        .pipe(csso({usage: {scopes: modules}}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(paths.output));
});