css preprocessor plugins

README.md

@@ -33,6 +33,7 @@ The generated project has dependencies that require **Node 4 or greater**.
 * [Deploying the App via GitHub Pages](#deploying-the-app-via-github-pages)
 * [Support for offline applications](#support-for-offline-applications)
 * [Commands autocompletion](#commands-autocompletion)
+* [CSS preprocessor integration](#css-preprocessor-integration)
 * [Known Issues](#known-issues)
 
 ## Installation
@@ -249,6 +250,18 @@ ng completion >> ~/.bash_profile
 source ~/.bash_profile
 ```
 
+
+### CSS Preprocessor integration
+
+We support all major CSS preprocessors:
+- sass (node-sass)
+- less (less)
+- compass (compass-importer + node-sass)
+- stylus (stylus)
+
+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.
+
+
 ## Known issues
 
 This project is currently a prototype so there are many known issues. Just to mention a few:

lib/broccoli/angular-broccoli-compass.js

@@ -0,0 +1,59 @@
+/* jshint node: true, esversion: 6 */
+'use strict';
+
+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');
+let compass = requireOrNull('compass');
+if (!sass || !compass) {
+  sass    = requireOrNull(`${process.env.PROJECT_ROOT}/node_modules/node-sass`);
+  compass = requireOrNull(`${process.env.PROJECT_ROOT}/node_modules/compass-importer`);
+}
+
+class CompassPlugin extends Plugin {
+  constructor(inputNodes, options) {
+    super(inputNodes, {});
+
+    options = options || {};
+    Plugin.call(this, inputNodes, {
+      cacheInclude: [/\.scss$/, /\.sass$/]
+    });
+    this.options = options;
+  }
+
+  build() {
+    this.listEntries().forEach(e => {
+      let fileName = path.resolve(e.basePath, e.relativePath);
+      this.compile(fileName, this.inputPaths[0], this.outputPath);
+    });
+  }
+
+  compile(fileName, inputPath, outputPath) {
+    let sassOptions = {
+      file: path.normalize(fileName),
+      includePaths: this.inputPaths,
+      data: '@import "compass"; .transition { @include transition(all); }',
+      importer: compass
+    };
+
+    let result = sass.renderSync(sassOptions);
+    let filePath = fileName.replace(inputPath, outputPath).replace(/\.s[ac]ss$/, '.css');
+
+    fse.outputFileSync(filePath, result.css, 'utf8');
+  }
+}
+
+exports.makeBroccoliTree = (sourceDir) => {
+  if (sass && compass) {
+    let compassSrcTree = new Funnel(sourceDir, {
+      include: ['**/*.scss', '**/*.sass'],
+      allowEmpty: true
+    });
+
+    return new CompassPlugin([compassSrcTree]);
+  }
+};

lib/broccoli/angular-broccoli-less.js

@@ -0,0 +1,54 @@
+/* jshint node: true, esversion: 6 */
+'use strict';
+
+const requireOrNull = require('./require-or-null');
+const Plugin        = require('broccoli-caching-writer');
+const fs            = require('fs');
+const fse           = require('fs-extra');
+const path          = require('path');
+const Funnel        = require('broccoli-funnel');
+
+let less = requireOrNull('less');
+if (!less) {
+  less = requireOrNull(`${process.env.PROJECT_ROOT}/node_modules/less`);
+}
+
+class LESSPlugin extends Plugin {
+  constructor(inputNodes, options) {
+    super(inputNodes, {});
+
+    options = options || {};
+    Plugin.call(this, inputNodes, {
+      cacheInclude: [/\.less$/]
+    });
+    this.options = options;
+  }
+
+  build() {
+    return Promise.all(this.listEntries().map(e => {
+      let fileName = path.resolve(e.basePath, e.relativePath);
+      return this.compile(fileName, this.inputPaths[0], this.outputPath);
+    }));
+  }
+
+  compile(fileName, inputPath, outputPath) {
+    let content = fs.readFileSync(fileName, 'utf8');
+
+    return less.render(content)
+      .then(output => {
+        let filePath = fileName.replace(inputPath, outputPath).replace(/\.less$/, '.css');
+        fse.outputFileSync(filePath, output.css, 'utf8');
+      });
+  }
+}
+
+exports.makeBroccoliTree = (sourceDir) => {
+  if (less) {
+    let lessSrcTree = new Funnel(sourceDir, {
+      include: ['**/*.less'],
+      allowEmpty: true
+    });
+
+    return new LESSPlugin([lessSrcTree]);
+  }
+};

lib/broccoli/angular-broccoli-sass.js

@@ -0,0 +1,61 @@
+/* jshint node: true, esversion: 6 */
+'use strict';
+
+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');
+if (!sass) {
+  sass = requireOrNull(`${process.env.PROJECT_ROOT}/node_modules/node-sass`);
+}
+
+class SASSPlugin extends Plugin {
+  constructor(inputNodes, options) {
+    super(inputNodes, {});
+
+    options = options || {};
+    Plugin.call(this, inputNodes, {
+      cacheInclude: [/\.scss$/, /\.sass$/]
+    });
+    this.options = options;
+  }
+
+  build() {
+    this.listEntries().forEach(e => {
+      let fileName = path.resolve(e.basePath, e.relativePath);
+      this.compile(fileName, this.inputPaths[0], this.outputPath);
+    });
+  }
+
+  compile(fileName, inputPath, outputPath) {
+    let sassOptions = {
+      file: path.normalize(fileName),
+      includePaths: this.inputPaths
+    };
+
+    let result = sass.renderSync(sassOptions);
+    let filePath = fileName.replace(inputPath, outputPath).replace(/\.s[ac]ss$/, '.css');
+
+    fse.outputFileSync(filePath, result.css, 'utf8');
+  }
+}
+
+exports.makeBroccoliTree = (sourceDir) => {
+  // include sass support only if compass-importer is not installed
+  let compass = requireOrNull('compass-importer');
+  if (!compass) {
+    compass = requireOrNull(`${process.env.PROJECT_ROOT}/node_modules/compass-importer`);
+  }
+
+  if (sass && !compass) {
+    let sassSrcTree = new Funnel(sourceDir, {
+      include: ['**/*.sass', '**/*.scss'],
+      allowEmpty: true
+    });
+
+    return new SASSPlugin([sassSrcTree]);
+  }
+};

lib/broccoli/angular-broccoli-stylus.js

@@ -0,0 +1,53 @@
+/* jshint node: true, esversion: 6 */
+'use strict';
+
+const requireOrNull = require('./require-or-null');
+const Plugin        = require('broccoli-caching-writer');
+const fs            = require('fs');
+const fse           = require('fs-extra');
+const path          = require('path');
+const Funnel        = require('broccoli-funnel');
+
+let stylus = requireOrNull('stylus');
+if (!stylus) {
+  stylus = requireOrNull(`${process.env.PROJECT_ROOT}/node_modules/stylus`);
+}
+
+class StylusPlugin extends Plugin {
+  constructor(inputNodes, options) {
+    super(inputNodes, {});
+
+    options = options || {};
+    Plugin.call(this, inputNodes, {
+      cacheInclude: [/\.styl$/]
+    });
+    this.options = options;
+  }
+
+  build() {
+    return Promise.all(this.listEntries().map(e => {
+      let fileName = path.resolve(e.basePath, e.relativePath);
+      return this.compile(fileName, this.inputPaths[0], this.outputPath);
+    }));
+  }
+
+  compile(fileName, inputPath, outputPath) {
+    let content = fs.readFileSync(fileName, 'utf8');
+
+    return stylus.render(content, { filename: path.basename(fileName) }, function(err, css) {
+      let filePath = fileName.replace(inputPath, outputPath).replace(/\.styl$/, '.css');
+      fse.outputFileSync(filePath, css, 'utf8');
+    });
+  }
+}
+
+exports.makeBroccoliTree = (sourceDir) => {
+  if (stylus) {
+    let stylusSrcTree = new Funnel(sourceDir, {
+      include: ['**/*.styl'],
+      allowEmpty: true
+    });
+
+    return new StylusPlugin([stylusSrcTree]);
+  }
+};

lib/broccoli/angular2-app.js

@@ -50,6 +50,13 @@ Angular2App.prototype.toTree = function () {
     buildTrees.push(excludeDotfilesTree);
   }
 
+  buildTrees = buildTrees.concat(
+    require('./angular-broccoli-sass').makeBroccoliTree(sourceDir),
+    require('./angular-broccoli-less').makeBroccoliTree(sourceDir),
+    require('./angular-broccoli-stylus').makeBroccoliTree(sourceDir),
+    require('./angular-broccoli-compass').makeBroccoliTree(sourceDir)
+  ).filter(x => !!x);
+
   var merged = mergeTrees(buildTrees, { overwrite: true });
 
   return mergeTrees([merged, new SwManifest([merged])]);
@@ -63,6 +70,9 @@ Angular2App.prototype.toTree = function () {
  */
 Angular2App.prototype._initProject = function () {
   this.project = Project.closestSync(process.cwd());
+
+  // project root dir env used on angular-cli side for including packages from project
+  process.env.PROJECT_ROOT = process.env.PROJECT_ROOT || this.project.root;
 };
 
 /**
@@ -304,7 +314,14 @@ Angular2App.prototype._getVendorNpmTree = function () {
 Angular2App.prototype._getAssetsTree = function () {
   return new Funnel(sourceDir, {
     include: ['**/*.*'],
-    exclude: ['**/*.ts', '**/*.js'],
+    exclude: [
+      '**/*.ts', 
+      '**/*.js', 
+      '**/*.scss', 
+      '**/*.sass', 
+      '**/*.less',
+      '**/*.styl'
+    ],
     allowEmpty: true
   });
 };

lib/broccoli/require-or-null.js

@@ -0,0 +1,10 @@
+/* jshint node: true, esversion: 6 */
+'use strict';
+
+module.exports = function(name) {
+  try {
+    return require(name);
+  } catch (e) {
+    return null;
+  }
+};