Converted Components and Samples over to SASS

.sass-lint.yml

@@ -0,0 +1,48 @@
+#########################
+## Sample Sass Lint File
+#########################
+# Linter Options
+options:
+# File Options
+files:
+  include: '*.s+(a|c)ss'
+# Rule Configuration
+rules:
+  class-name-format: 0
+  variable-name-format: 0
+  mixin-name-format: 0
+  force-element-nesting: 0
+  clean-import-paths:
+  - 0
+  extends-before-mixins: 2
+  extends-before-declarations: 2
+  placeholder-in-extend: 2
+  mixins-before-declarations:
+    - 2
+    -
+      exclude:
+        - breakpoint
+        - mq
+
+  no-warn: 1
+  no-debug: 1
+  no-ids: 2
+  no-important: 2
+  hex-notation:
+    - 2
+    -
+      style: uppercase
+  indentation:
+    - 0
+    -
+      size: 2
+  property-sort-order:
+    - 0
+    -
+      ignore-custom-properties: true
+  variable-for-property:
+    - 2
+    -
+      properties:
+        - margin
+        - content

gulp/ComponentSamples.js

@@ -2,6 +2,7 @@ var gulp = require('gulp');
 var fs = require('fs');
 var Utilities = require('./modules/Utilities');
 var Config = require('./modules/Config');
+var BuildConfig = require('./modules/BuildConfig');
 var ConsoleHelper = require('./modules/ConsoleHelper');
 var ErrorHandling = require('./modules/ErrorHandling');
 var Plugins = require('./modules/Plugins');
@@ -67,33 +68,46 @@ gulp.task('ComponentSamples-moveJS', function() {
             .pipe(gulp.dest(Config.paths.distSamples + '/Components'));
 });
 
-//
 // Style Linting
 // ----------------------------------------------------------------------------
 
 gulp.task('ComponentSamples-styleHinting',  function() {
-    return gulp.src(Config.paths.componentsPath + '/**/*.less')
-            .pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
-                title: "Checking LESS Compile errors and linting"
-            })))
-            .pipe(Plugins.lesshint({
-                configPath: './.lesshintrc'
-            }))
-            .pipe(ErrorHandling.LESSHintErrors());
+    if (!Config.buildSass) {
+       return gulp.src(Config.paths.componentsPath + '/**/*.less')
+          .pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
+              title: "Checking LESS Compile errors and linting"
+          })))
+          .pipe(Plugins.lesshint({
+              configPath: './.lesshintrc'
+          }))
+         .pipe(ErrorHandling.LESSHintErrors());
+    }
 });
 
-gulp.task('ComponentSamples-less', ['ComponentSamples-styleHinting'], function() {
+//
+// Styles tasks
+// ----------------------------------------------------------------------------
+
+gulp.task('ComponentSamples-buildStyles', function() {
    return folderList.map(function(componentName) {
-        var srcTemplate = Config.paths.templatePath + '/'+ 'component-manifest-template.less';
+        var srcTemplate = Config.paths.templatePath + '/'+ BuildConfig.template;
         var destFolder = Config.paths.distSampleComponents + '/' + componentName;
         var srcFolderName = Config.paths.componentsPath + '/' + componentName;
         var manifest = Utilities.parseManifest(srcFolderName + '/' + componentName + '.json');
         var deps = manifest.dependencies || [];
         var distFolderName = Config.paths.distSampleComponents + '/' + componentName;
-        var hasFileChanged = Utilities.hasFileChangedInFolder(srcFolderName, distFolderName, '.less', '.css');
+        var hasFileChanged = Utilities.hasFileChangedInFolder(srcFolderName, distFolderName, '.' + BuildConfig.fileExtension, '.css');
 
         if (hasFileChanged) {
-            return ComponentHelper.buildComponentStyles(destFolder, srcTemplate, componentName, deps);
+            return ComponentHelper.buildComponentStyles(
+                        destFolder, 
+                        srcTemplate, 
+                        componentName, 
+                        deps,
+                        BuildConfig.processorPlugin,
+                        BuildConfig.processorName,
+                        BuildConfig.compileErrorHandler
+                    );
         } else {
             return;
         }
@@ -123,7 +137,7 @@ gulp.task('ComponentSamples-build', function() {
            var jsFiles = Utilities.getFilesByExtension(srcFolderName, '.js');
            var jsLinks = '';
 
-           for(var x = 0; x < jsFiles.length; x++) {
+           for (var x = 0; x < jsFiles.length; x++) {
                jsLinks += '<script type="text/javascript" src="' + jsFiles[x] + '"></script>' + "\r\b";
            }
            componentPipe = gulp.src(fileGlob)
@@ -165,7 +179,7 @@ gulp.task('ComponentSamples-build', function() {
 var ComponentSamplesTasks = [
     'ComponentSamples-build', 
     'ComponentSamples-copyAssets', 
-    'ComponentSamples-less',
+    'ComponentSamples-buildStyles',
     'ComponentSamples-styleHinting',
     'ComponentSamples-moveJS',
     'ComponentSamples-copyIgnoredFiles'

gulp/ConfigureEnvironment.js

@@ -1,8 +1,29 @@
 var gulp = require('gulp');
 var Config = require('./modules/Config');
+var BuildConfig = require('./modules/BuildConfig');
+var Plugins = require('./modules/Plugins');
+var ErrorHandling = require('./modules/ErrorHandling');
+
+
+gulp.task('ConfigureEnvironment-setLessMode', function() {
+    Config.buildSass = false;
+    BuildConfig.template = 'component-manifest-template.less';
+    BuildConfig.srcPath = Config.paths.srcLess;
+    BuildConfig.processorPlugin = Plugins.less;
+    BuildConfig.fileExtension = Config.lessExtension;
+    BuildConfig.compileErrorHandler = ErrorHandling.LESSCompileErrors;
+    BuildConfig.processorName = "less";
+    return;
+});
 
 gulp.task('ConfigureEnvironment-setSassMode', function() {
     Config.buildSass = true;
+    BuildConfig.template = 'component-manifest-template.scss';
+    BuildConfig.srcPath = Config.paths.srcSass;
+    BuildConfig.processorPlugin = Plugins.sass;
+    BuildConfig.fileExtension = Config.sassExtension;
+    BuildConfig.compileErrorHandler = ErrorHandling.SASSCompileErrors;
+    BuildConfig.processorName = "sass";
     return;
 });
 

gulp/FabricBuild.js

@@ -3,32 +3,11 @@ var gulp = require('gulp');
 // Fabric Helper Modules
 var Banners = require('./modules/Banners');
 var Config = require('./modules/Config');
+var BuildConfig = require('./modules/BuildConfig');
 var ConsoleHelper = require('./modules/ConsoleHelper');
 var ErrorHandling = require('./modules/ErrorHandling');
 var Plugins = require('./modules/Plugins');
 
-var srcPath;
-var cssPlugin;
-var fileExtension;
-var prefixLinter;
-
-//
-// Configure Tasks
-// ----------------------------------------------------------------------------
-gulp.task('Fabric-configureBuild', function () {
-    // Check if building SASS
-    if (Config.buildSass) {
-        srcPath = Config.paths.srcSass;
-        cssPlugin = Plugins.sass;
-        fileExtension = Config.sassExtension;
-    } else {
-        srcPath = Config.paths.srcLess;
-        cssPlugin = Plugins.less;
-        fileExtension = Config.lessExtension;
-    }
-    return;
-});
-
 
 //
 // Clean/Delete Tasks
@@ -43,26 +22,17 @@ gulp.task('Fabric-nuke', function () {
 // Style Linting
 // ---------------------------------------------------------------------------
 gulp.task('Fabric-styleHinting',  function() {
-    if (Config.buildSass) {
-        var stream;
-        stream = gulp.src(Config.paths.srcSass + '/Fabric.scss')
-            .pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
-                title: "Checking SASS Compile errors and linting"
-            })))
-            .pipe(Plugins.scsslint())
-            .pipe(ErrorHandling.SASSlintErrors());
-
-    } else {
-        stream = gulp.src(Config.paths.srcLess + '/Fabric.less')
+    if (!Config.buildSass) {
+       return gulp.src(Config.paths.srcLess + '/Fabric.less')
             .pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
                 title: "Checking LESS Compile errors and linting"
             })))
             .pipe(Plugins.lesshint({
                 configPath: './.lesshintrc'
             }))
             .pipe(ErrorHandling.LESSHintErrors());
+
     }
-    return stream;
 });
 
 
@@ -96,15 +66,16 @@ gulp.task('Fabric-copyAssets', function () {
 // ----------------------------------------------------------------------------
 
 // Build LESS files for core Fabric into LTR and RTL CSS files.
-gulp.task('Fabric-buildStyles', ['Fabric-configureBuild', 'Fabric-styleHinting'], function () {
-    var fabric = gulp.src(srcPath + '/' + 'Fabric.' + fileExtension)
+
+gulp.task('Fabric-buildStyles', ['Fabric-styleHinting'], function () {
+    var fabric = gulp.src(BuildConfig.srcPath + '/' + 'Fabric.' + BuildConfig.fileExtension)
             .pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))
             .pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
-                    title: "Building Core Fabric " + fileExtension + " File"
+                    title: "Building Core Fabric " + BuildConfig.fileExtension + " File"
             })))
-            .pipe(cssPlugin().on('error', ErrorHandling.LESSCompileErrors))
-            .pipe(Plugins.rename('fabric.css'))
             .pipe(Plugins.header(Banners.getBannerTemplate(), Banners.getBannerData()))
+            .pipe(BuildConfig.processorPlugin().on('error', BuildConfig.compileErrorHandler))
+            .pipe(Plugins.rename('fabric.css'))
             .pipe(Plugins.changed(Config.paths.distCSS, {extension: '.css'}))
             .pipe(Plugins.autoprefixer({
                 browsers: ['last 2 versions', 'ie >= 9'],
@@ -118,15 +89,15 @@ gulp.task('Fabric-buildStyles', ['Fabric-configureBuild', 'Fabric-styleHinting']
             .pipe(gulp.dest(Config.paths.distCSS));
 
     // Build full and minified Fabric RTL CSS.
-    var fabricRtl = gulp.src(srcPath + '/' + 'Fabric.Rtl.' + fileExtension)
+    var fabricRtl = gulp.src(BuildConfig.srcPath + '/' + 'Fabric.Rtl.' + BuildConfig.fileExtension)
             .pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))
             .pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
-                    title: "Building RTL Fabric LESS " + fileExtension + " File"
+                    title: "Building RTL Fabric " + BuildConfig.processorName + " " + BuildConfig.fileExtension + " File"
             })))
-            .pipe(cssPlugin().on('error', ErrorHandling.LESSCompileErrors))
+            .pipe(Plugins.header(Banners.getBannerTemplate(), Banners.getBannerData()))
+            .pipe(BuildConfig.processorPlugin().on('error', BuildConfig.compileErrorHandler))
             .pipe(Plugins.flipper())
             .pipe(Plugins.rename('fabric.rtl.css'))
-            .pipe(Plugins.header(Banners.getBannerTemplate(), Banners.getBannerData()))
             .pipe(Plugins.changed(Config.paths.distCSS, {extension: '.css'}))
             .pipe(Plugins.autoprefixer({
                 browsers: ['last 2 versions', 'ie >= 9'],
@@ -146,7 +117,7 @@ gulp.task('Fabric-buildStyles', ['Fabric-configureBuild', 'Fabric-styleHinting']
 // Rolled up Build tasks
 // ----------------------------------------------------------------------------
 
-gulp.task('Fabric', ['Fabric-configureBuild', 'Fabric-copyAssets', 'Fabric-styleHinting', 'Fabric-buildStyles']);
+gulp.task('Fabric', ['Fabric-copyAssets', 'Fabric-styleHinting', 'Fabric-buildStyles']);
 
 //
 // Fabric Messages

gulp/FabricComponents.js

@@ -2,12 +2,14 @@ var gulp = require('gulp');
 var Utilities = require('./modules/Utilities');
 var Banners = require('./modules/Banners');
 var Config = require('./modules/Config');
+var BuildConfig = require('./modules/BuildConfig');
 var ConsoleHelper = require('./modules/ConsoleHelper');
 var ErrorHandling = require('./modules/ErrorHandling');
 var Plugins = require('./modules/Plugins');
 var ComponentHelper = require('./modules/ComponentHelper');
 var folderList = Utilities.getFolders(Config.paths.componentsPath);
 
+
 //
 // Clean/Delete Tasks
 // ----------------------------------------------------------------------------
@@ -37,19 +39,14 @@ gulp.task('FabricComponents-copyAssets', function () {
 // ----------------------------------------------------------------------------
 
 // Build Components LESS files
-gulp.task('FabricComponents-compiledLess', function () {
-
-    var stream = gulp.src(Config.paths.srcLess + '/fabric.components.less')
+gulp.task('FabricComponents-buildAndCombineStyles', function () {
+    var stream = gulp.src(BuildConfig.srcPath + '/Fabric.Components.' + BuildConfig.fileExtension)
         .pipe(Plugins.plumber())
-        .pipe(Plugins.lesshint({
-            configPath: './.lesshintrc'
-        }))
-        .pipe(ErrorHandling.LESSHintErrors())
-        .pipe(Plugins.less().on('error', ErrorHandling.LESSCompileErrors))
         .pipe(Plugins.header(Banners.getBannerTemplate(), Banners.getBannerData()))
+        .pipe(BuildConfig.processorPlugin().on('error', BuildConfig.compileErrorHandler))
         .pipe(Plugins.changed(Config.paths.distCSS, {extension: '.css'}))
         .pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
-                title: "Building Fabric Components Less into One Files"
+                title: "Building Fabric Components " + BuildConfig.processorName + " into One Files"
         })))
         .pipe(Plugins.autoprefixer(
             {
@@ -76,18 +73,26 @@ gulp.task('FabricComponents-compiledLess', function () {
 
 });
 
-gulp.task('FabricComponents-less', function () {
+gulp.task('FabricComponents-buildStyles', function () {
     return folderList.map(function(componentName) {
 
-        var srcTemplate = Config.paths.templatePath + '/'+ 'component-manifest-template.less';
+        var srcTemplate = Config.paths.templatePath + '/'+ BuildConfig.template;
         var destFolder = Config.paths.distComponents + '/' + componentName;
         var srcFolderName = Config.paths.componentsPath + '/' + componentName;
         var manifest = Utilities.parseManifest(srcFolderName + '/' + componentName + '.json');
         var deps = manifest.dependencies || [];
-        var hasFileChanged = Utilities.hasFileChangedInFolder(srcFolderName, destFolder, '.less', '.css');
+        var hasFileChanged = Utilities.hasFileChangedInFolder(srcFolderName, destFolder, '.' + BuildConfig.fileExtension, '.css');
 
-        if (hasFileChanged) {
-            return ComponentHelper.buildComponentStyles(destFolder, srcTemplate, componentName, deps);
+        if(hasFileChanged) {
+            return ComponentHelper.buildComponentStyles(
+                        destFolder, 
+                        srcTemplate, 
+                        componentName, 
+                        deps, 
+                        BuildConfig.processorPlugin,
+                        BuildConfig.processorName,
+                        BuildConfig.compileErrorHandler
+                   );
         } else {
             return;
         }
@@ -98,7 +103,7 @@ gulp.task('FabricComponents-less', function () {
 // JS Only tasks
 // ----------------------------------------------------------------------------
 
-gulp.task('FabricComponents-Movejs', function() {
+gulp.task('FabricComponents-moveJs', function() {
     return gulp.src(Config.paths.componentsPath + '/**/*.js')
         .pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))
         .pipe(Plugins.concat('jquery.fabric.js'))
@@ -118,7 +123,13 @@ gulp.task('FabricComponents-Movejs', function() {
 // ----------------------------------------------------------------------------
 
 // Build for Fabric component demos
-gulp.task('FabricComponents', ['FabricComponents-compiledLess', 'FabricComponents-less', 'FabricComponents-copyAssets', 'FabricComponents-Movejs']);
+gulp.task('FabricComponents', [
+    'FabricComponents-buildAndCombineStyles', 
+    'FabricComponents-buildStyles', 
+    'FabricComponents-copyAssets', 
+    'FabricComponents-moveJs'
+    ]
+);
 
 //
 // Fabric Messages