build: Angular2App is now a class, and accepts options for css compilers.

Author: hansl

README.md

@@ -261,6 +261,7 @@ We support all major CSS preprocessors:
 
 To use one just install for example `npm install node-sass` and rename `.css` files in your project to `.scss` or `.sass`. They will be compiled automatically.
 
+The `Angular2App`'s options argument has `sassCompiler`, `lessCompiler`, `stylusCompiler` and `compassCompiler` options that are passed directly to their respective CSS preprocessors.
 
 ## Known issues
 

lib/broccoli/angular-broccoli-compass.js

@@ -33,12 +33,12 @@ class CompassPlugin extends Plugin {
   }
 
   compile(fileName, inputPath, outputPath) {
-    let sassOptions = {
-      file: path.normalize(fileName),
-      includePaths: this.inputPaths,
+    let sassOptions = Object.assign(this.options, {
       data: '@import "compass"; .transition { @include transition(all); }',
+      file: fileName,
+      includePaths: [inputPath].concat(this.options.inputPaths || []),
       importer: compass
-    };
+    });
 
     let result = sass.renderSync(sassOptions);
     let filePath = fileName.replace(inputPath, outputPath).replace(/\.s[ac]ss$/, '.css');
@@ -47,13 +47,13 @@ class CompassPlugin extends Plugin {
   }
 }
 
-exports.makeBroccoliTree = (sourceDir) => {
+exports.makeBroccoliTree = (sourceDir, options) => {
   if (sass && compass) {
     let compassSrcTree = new Funnel(sourceDir, {
       include: ['**/*.scss', '**/*.sass'],
       allowEmpty: true
     });
 
-    return new CompassPlugin([compassSrcTree]);
+    return new CompassPlugin([compassSrcTree], options);
   }
 };

lib/broccoli/angular-broccoli-less.js

@@ -34,21 +34,21 @@ class LESSPlugin extends Plugin {
   compile(fileName, inputPath, outputPath) {
     let content = fs.readFileSync(fileName, 'utf8');
 
-    return less.render(content)
+    return less.render(content, this.options)
       .then(output => {
         let filePath = fileName.replace(inputPath, outputPath).replace(/\.less$/, '.css');
         fse.outputFileSync(filePath, output.css, 'utf8');
       });
   }
 }
 
-exports.makeBroccoliTree = (sourceDir) => {
+exports.makeBroccoliTree = (sourceDir, options) => {
   if (less) {
     let lessSrcTree = new Funnel(sourceDir, {
       include: ['**/*.less'],
       allowEmpty: true
     });
 
-    return new LESSPlugin([lessSrcTree]);
+    return new LESSPlugin([lessSrcTree], options);
   }
 };

lib/broccoli/angular-broccoli-sass.js

@@ -4,7 +4,6 @@
 const requireOrNull = require('./require-or-null');
 const Plugin        = require('broccoli-caching-writer');
 const fse           = require('fs-extra');
-const path          = require('path');
 const Funnel        = require('broccoli-funnel');
 
 let sass = requireOrNull('node-sass');
@@ -24,26 +23,32 @@ class SASSPlugin extends Plugin {
   }
 
   build() {
-    this.listEntries().forEach(e => {
-      let fileName = path.resolve(e.basePath, e.relativePath);
+    this.listFiles().forEach(fileName => {
       this.compile(fileName, this.inputPaths[0], this.outputPath);
     });
   }
 
   compile(fileName, inputPath, outputPath) {
-    let sassOptions = {
-      file: path.normalize(fileName),
-      includePaths: this.inputPaths
-    };
+    const outSourceName = fileName.replace(inputPath, outputPath);
+    const outFileName = outSourceName.replace(/\.s[ac]ss$/, '.css');
 
-    let result = sass.renderSync(sassOptions);
-    let filePath = fileName.replace(inputPath, outputPath).replace(/\.s[ac]ss$/, '.css');
+    // We overwrite file, outFile and include the file path for the includePath.
+    // We also make sure the options don't include a data field.
+    const sassOptions = Object.assign(this.options, {
+      data: null,
+      file: fileName,
+      outFile: outFileName,
+      includePaths: [inputPath].concat(this.options.includePaths || [])
+    });
 
-    fse.outputFileSync(filePath, result.css, 'utf8');
+    const result = sass.renderSync(sassOptions);
+    fse.outputFileSync(outFileName, result.css, 'utf-8');
   }
 }
 
-exports.makeBroccoliTree = (sourceDir) => {
+exports.makeBroccoliTree = (sourceDir, options) => {
+  options = options || {};
+
   // include sass support only if compass-importer is not installed
   let compass = requireOrNull('compass-importer');
   if (!compass) {
@@ -56,6 +61,6 @@ exports.makeBroccoliTree = (sourceDir) => {
       allowEmpty: true
     });
 
-    return new SASSPlugin([sassSrcTree]);
+    return new SASSPlugin([sassSrcTree], options);
   }
 };

lib/broccoli/angular-broccoli-stylus.js

@@ -34,20 +34,24 @@ class StylusPlugin extends Plugin {
   compile(fileName, inputPath, outputPath) {
     let content = fs.readFileSync(fileName, 'utf8');
 
-    return stylus.render(content, { filename: path.basename(fileName) }, function(err, css) {
+    const options = Object.assign(this.options, {
+      filename: path.basename(fileName)
+    });
+
+    return stylus.render(content, options, function(err, css) {
       let filePath = fileName.replace(inputPath, outputPath).replace(/\.styl$/, '.css');
       fse.outputFileSync(filePath, css, 'utf8');
     });
   }
 }
 
-exports.makeBroccoliTree = (sourceDir) => {
+exports.makeBroccoliTree = (sourceDir, options) => {
   if (stylus) {
     let stylusSrcTree = new Funnel(sourceDir, {
       include: ['**/*.styl'],
       allowEmpty: true
     });
 
-    return new StylusPlugin([stylusSrcTree]);
+    return new StylusPlugin([stylusSrcTree], options);
   }
 };