docs: css preprocessors support

Author: jkuri

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

@@ -2,23 +2,8 @@
 'use strict';
 
 try {
-  let sass;
-  let compass;
-
-  if (process.platform === 'win32') {
-    require.resolve(`${process.env.PWD}/node_modules/node-sass`);
-    require.resolve(`${process.env.PWD}/node_modules/compass-importer`);
-    sass = require(`${process.env.PWD}/node_modules/node-sass`);
-    compass = require(`${process.env.PWD}/node_modules/compass-importer`);
-  } else {
-    process.env.NODE_PATH += `:${process.env.PWD}/node_modules`;
-    require('module').Module._initPaths();
-    require.resolve('node-sass');
-    require.resolve('compass-importer');
-    sass = require('node-sass');
-    compass = require('compass-importer');
-  }
-
+  const sass    = require(`${process.env.PWD}/node_modules/node-sass`);
+  const compass = require(`${process.env.PWD}/node_modules/compass-importer`);
   const Plugin  = require('broccoli-caching-writer');
   const fse     = require('fs-extra');
   const path    = require('path');
@@ -37,28 +22,22 @@ try {
     }
 
     build() {
-      let entries = this.listEntries();
-      let rootFileNames = entries.map(e => {
-        return path.resolve(e.basePath, e.relativePath);
-      });
-
-      rootFileNames.forEach(fileName => {
+      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.join(fileName),
+        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(/\.scss$/, '.css')
-        .replace(/\.sass$/, '.css');
+      let filePath = fileName.replace(inputPath, outputPath).replace(/\.s[ac]ss$/, '.css');
 
       fse.outputFileSync(filePath, result.css, 'utf8');
     }

lib/broccoli/angular-broccoli-less.js

@@ -2,18 +2,7 @@
 'use strict';
 
 try {
-  let less;
-
-  if (process.platform === 'win32') {
-    require.resolve(`${process.env.PWD}/node_modules/less`);
-    less = require(`${process.env.PWD}/node_modules/less`);
-  } else {
-    process.env.NODE_PATH += `:${process.env.PWD}/node_modules`;
-    require('module').Module._initPaths();
-    require.resolve('less');
-    less = require('less');
-  }
-
+  const less    = require(`${process.env.PWD}/node_modules/less`);
   const Plugin  = require('broccoli-caching-writer');
   const fs      = require('fs');
   const fse     = require('fs-extra');
@@ -33,12 +22,8 @@ try {
     }
 
     build() {
-      let entries = this.listEntries();
-      let rootFileNames = entries.map(e => {
-        return path.resolve(e.basePath, e.relativePath);
-      });
-
-      return Promise.all(rootFileNames.map(fileName => {
+      return Promise.all(this.listEntries().map(e => {
+        let fileName = path.resolve(e.basePath, e.relativePath);
         return this.compile(fileName, this.inputPaths[0], this.outputPath);
       }));
     }

lib/broccoli/angular-broccoli-sass.js

@@ -2,18 +2,7 @@
 'use strict';
 
 try {
-  let sass;
-
-  if (process.platform === 'win32') {
-    require.resolve(`${process.env.PWD}/node_modules/node-sass`);
-    sass = require(`${process.env.PWD}/node_modules/node-sass`);
-  } else {
-    process.env.NODE_PATH += `:${process.env.PWD}/node_modules`;
-    require('module').Module._initPaths();
-    require.resolve('node-sass');
-    sass = require('node-sass');
-  }
-
+  const sass    = require(`${process.env.PWD}/node_modules/node-sass`);
   const Plugin  = require('broccoli-caching-writer');
   const fse     = require('fs-extra');
   const path    = require('path');
@@ -32,12 +21,8 @@ try {
     }
 
     build() {
-      let entries = this.listEntries();
-      let rootFileNames = entries.map(e => {
-        return path.resolve(e.basePath, e.relativePath);
-      });
-
-      rootFileNames.forEach(fileName => {
+      this.listEntries().forEach(e => {
+        let fileName = path.resolve(e.basePath, e.relativePath);
         this.compile(fileName, this.inputPaths[0], this.outputPath);
       });
     }
@@ -49,9 +34,7 @@ try {
       };
 
       let result = sass.renderSync(sassOptions);
-      let filePath = fileName.replace(inputPath, outputPath)
-        .replace(/\.scss$/, '.css')
-        .replace(/\.sass$/, '.css');
+      let filePath = fileName.replace(inputPath, outputPath).replace(/\.s[ac]ss$/, '.css');
 
       fse.outputFileSync(filePath, result.css, 'utf8');
     }

lib/broccoli/angular-broccoli-stylus.js

@@ -2,18 +2,7 @@
 'use strict';
 
 try {
-  let stylus;
-
-  if (process.platform === 'win32') {
-    require.resolve(`${process.env.PWD}/node_modules/stylus`);
-    stylus = require(`${process.env.PWD}/node_modules/stylus`);
-  } else {
-    process.env.NODE_PATH += `:${process.env.PWD}/node_modules`;
-    require('module').Module._initPaths();
-    require.resolve('stylus');
-    stylus = require('stylus');
-  }
-
+  const stylus  = require(`${process.env.PWD}/node_modules/stylus`);
   const Plugin  = require('broccoli-caching-writer');
   const fs      = require('fs');
   const fse     = require('fs-extra');
@@ -33,12 +22,8 @@ try {
     }
 
     build() {
-      let entries = this.listEntries();
-      let rootFileNames = entries.map(e => {
-        return path.resolve(e.basePath, e.relativePath);
-      });
-
-      return Promise.all(rootFileNames.map(fileName => {
+      return Promise.all(this.listEntries().map(e => {
+        let fileName = path.resolve(e.basePath, e.relativePath);
         return this.compile(fileName, this.inputPaths[0], this.outputPath);
       }));
     }

tests/e2e/e2e_workflow.spec.js

@@ -192,7 +192,7 @@ describe('Basic end-to-end Workflow', function () {
       });
   });
 
-  it('Installs sass support successfully via `ng install sass`', function() {
+  it('Installs sass support successfully', function() {
     this.timeout(420000);
 
     sh.exec('npm install node-sass', { silent: true });
@@ -217,11 +217,12 @@ describe('Basic end-to-end Workflow', function () {
     });
   });
 
-  it('Uninstalls sass support successfully via `ng uninstall sass`', function(done) {
+  it('Uninstalls sass support successfully', function(done) {
     this.timeout(420000);
 
-    sh.exec('npm uninstall node-sass', { silent: true });
     let sassPath = path.join(process.cwd(), 'node_modules', 'node-sass');
+    expect(existsSync(sassPath)).to.be.equal(true);
+    sh.exec('npm uninstall node-sass', { silent: true });
     expect(existsSync(sassPath)).to.be.equal(false);
     return ng(['destroy', 'component', 'test-component'])
     .then(() => {
@@ -230,7 +231,7 @@ describe('Basic end-to-end Workflow', function () {
     });
   });
 
-  it('Installs less support successfully via `ng install less`', function() {
+  it('Installs less support successfully', function() {
     this.timeout(420000);
 
     sh.exec('npm install less', { silent: true });
@@ -255,19 +256,20 @@ describe('Basic end-to-end Workflow', function () {
     });
   });
 
-  it('Uninstalls less support successfully via `ng uninstall less`', function() {
+  it('Uninstalls less support successfully', function() {
     this.timeout(420000);
-
-    sh.exec('npm uninstall less', { silent: true });
+    
     let lessPath = path.join(process.cwd(), 'node_modules', 'less');
+    expect(existsSync(lessPath)).to.be.equal(true);
+    sh.exec('npm uninstall less', { silent: true });
     expect(existsSync(lessPath)).to.be.equal(false);
     return ng(['destroy', 'component', 'test-component'])
     .then(() => {
       sh.rm('-rf', path.join(process.cwd(), 'src', 'app', 'test-component'));
     });
   });
 
-  it('Installs stylus support successfully via `ng install stylus`', function() {
+  it('Installs stylus support successfully', function() {
     this.timeout(420000);
 
     sh.exec('npm install stylus', { silent: true });
@@ -291,11 +293,12 @@ describe('Basic end-to-end Workflow', function () {
     });
   });
 
-  it('Uninstalls stylus support successfully via `ng uninstall stylus`', function() {
+  it('Uninstalls stylus support successfully', function() {
     this.timeout(420000);
-
-    sh.exec('npm uninstall stylus', { silent: true });
+    
     let stylusPath = path.join(process.cwd(), 'node_modules', 'stylus');
+    expect(existsSync(stylusPath)).to.be.equal(true);
+    sh.exec('npm uninstall stylus', { silent: true });
     expect(existsSync(stylusPath)).to.be.equal(false);
     return ng(['destroy', 'component', 'test-component'])
     .then(() => {