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

@@ -37,28 +37,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

@@ -33,12 +33,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

@@ -32,12 +32,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 +45,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

@@ -33,12 +33,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

@@ -220,8 +220,9 @@ describe('Basic end-to-end Workflow', function () {
   it('Uninstalls sass support successfully via `ng uninstall sass`', 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(() => {
@@ -257,9 +258,10 @@ describe('Basic end-to-end Workflow', function () {
 
   it('Uninstalls less support successfully via `ng uninstall less`', 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(() => {
@@ -293,9 +295,10 @@ describe('Basic end-to-end Workflow', function () {
 
   it('Uninstalls stylus support successfully via `ng uninstall stylus`', 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(() => {