@area17/a17-boilerplate/tasks/styles.js

The official AREA 17 boilerplate

require('babel-polyfill');
const sass = require('node-sass');
const path = require('path');
const fs = require('fs-extra');
const chalk = require('chalk');
const createLogger = require('logging').default;
const utils = require('../utils');
const logger = createLogger('Styles');

const data = require(utils.getManifestPath());
const argv = require('minimist')(process.argv.slice(2));

// get all the styles file specified in manifest
const styles = new Map(Object.entries(data.styles));

logger.info('Starting Styles');

function renderStyle(source, name) {
  // get file source and dest path
  source = data.paths.source + source;
  let destination = path.resolve(data.paths.dist, 'styles', name);
  let destinationMap = path.resolve(data.paths.dist, 'styles', name + '.map');

  let options = data.config.styles;
  options.file = source;
  options.outFile = name;
  options.sourceMap = name + '.map';

  // check if need to be compressed for production
  if (argv.production) {
    options.outputStyle = 'compressed';
    options.sourceMap = false; // no sourcemap on production
  }

  // use node sass for css compile
  sass.render(options, (error, result) => {
    if (error) {
      logger.error(
        chalk.red(`${error.message} on line ${error.line} at ${error.file}`)
      );
    } else {
      logger.info('Sass Compilation ready');
      fs.ensureDirSync(path.resolve(data.paths.dist, 'styles'));
      fs.writeFileSync(destination, result.css);
      
      if (options.sourceMap) {
        fs.writeFileSync(destinationMap, result.map);
      }
      
      logger.info(chalk.green('CSS file written at: ', destination));
    }
  });
}

styles.forEach(renderStyle);