Merge pull request #303 from OfficeDev/miwhea/remove-less

Remove LESS

.sass-lint.yml

@@ -12,13 +12,14 @@ rules:
   variable-name-format: 0
   mixin-name-format: 0
   force-element-nesting: 0
+  nesting-depth: 0
   clean-import-paths:
   - 0
   extends-before-mixins: 2
   extends-before-declarations: 2
   placeholder-in-extend: 2
   mixins-before-declarations:
-    - 2
+    - 0
     -
       exclude:
         - breakpoint

gulp/ComponentSamples.js

@@ -69,21 +69,17 @@ gulp.task('ComponentSamples-moveJS', function() {
             .pipe(gulp.dest(Config.paths.distSamples + '/Components'));
 });
 
-// Style Linting
-// ----------------------------------------------------------------------------
 
 gulp.task('ComponentSamples-styleHinting',  function() {
-    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());
-    }
-});
+   return gulp.src(Config.paths.componentsPath + '/**/*.scss')
+      .pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))
+      .pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
+          title: "Checking SASS Compile errors and linting"
+      })))
+     .pipe(Plugins.sasslint())
+     .pipe(ErrorHandling.SASSlintErrors());
+
+ });
 
 //
 // Styles tasks
@@ -182,9 +178,9 @@ var ComponentSamplesTasks = [
     'ComponentSamples-build', 
     'ComponentSamples-copyAssets', 
     'ComponentSamples-buildStyles',
-    'ComponentSamples-styleHinting',
     'ComponentSamples-moveJS',
     'ComponentSamples-copyIgnoredFiles'
+    // 'ComponentSamples-styleHinting' Commented out until warnings are resolved
 ];
 
 //Build Fabric Component Samples

gulp/ConfigureEnvironment.js

@@ -4,29 +4,6 @@ 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.task('ConfigureEnvironment-setDebugMode', function() {
     Config.debugMode = true;
     return;

gulp/FabricBuild.js

@@ -15,59 +15,33 @@ var Plugins = require('./modules/Plugins');
 
 // Clean out the distribution folder.
 gulp.task('Fabric-nuke', function () {
-    return Plugins.del.sync([Config.paths.distLess, Config.paths.distCSS, Config.paths.distSass]);
-});
-
-//
-// Style Linting
-// ---------------------------------------------------------------------------
-gulp.task('Fabric-styleHinting',  function() {
-    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 Plugins.del.sync([Config.paths.distCSS, Config.paths.distSass]);
 });
 
 
 //
 // Copying Files Tasks
 // ----------------------------------------------------------------------------
 
-// Copy all LESS files to distribution folder.
-gulp.task('Fabric-copyAssets', function () {
-    // Copy LESS files.
-     var moveLess = gulp.src([Config.paths.srcLess + '/**/*'])
-            .pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))
-            .pipe(Plugins.changed(Config.paths.distLess))
-            .pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
-                    title: "Moving LESS Assets over to Dist"
-            })))
-            .pipe(gulp.dest(Config.paths.distLess));
-
+// Copy all Sass files to distribution folder.
+gulp.task('Fabric-copyAssets', function () {            
      var moveSass =  gulp.src([Config.paths.srcSass + '/**/*'])
             .pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))
             .pipe(Plugins.changed(Config.paths.distSass))
             .pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
-                    title: "Moving SASS files over to Dist"
+                    title: "Moving Sass files over to Dist"
             })))
             .pipe(gulp.dest(Config.paths.distSass));
-     return Plugins.mergeStream(moveLess, moveSass);
+     return moveSass;
 });
 
 //
-// LESS tasks
+// Sass tasks
 // ----------------------------------------------------------------------------
 
-// Build LESS files for core Fabric into LTR and RTL CSS files.
+// Build Sass files for core Fabric into LTR and RTL CSS files.
 
-gulp.task('Fabric-buildStyles', ['Fabric-styleHinting'], function () {
+gulp.task('Fabric-buildStyles', function () {
     var fabric = gulp.src(BuildConfig.srcPath + '/' + 'Fabric.' + BuildConfig.fileExtension)
             .pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))
             .pipe(Plugins.gulpif(Config.debugMode, Plugins.debug({
@@ -117,7 +91,7 @@ gulp.task('Fabric-buildStyles', ['Fabric-styleHinting'], function () {
 // Rolled up Build tasks
 // ----------------------------------------------------------------------------
 
-gulp.task('Fabric', ['Fabric-copyAssets', 'Fabric-styleHinting', 'Fabric-buildStyles']);
+gulp.task('Fabric', ['Fabric-copyAssets', 'Fabric-buildStyles']);
 
 //
 // Fabric Messages
@@ -137,7 +111,7 @@ gulp.task('Fabric-updated', ['Fabric'], function () {
 
 // Watch and build Fabric when sources change.
 gulp.task('Fabric-watch', ['Fabric', 'Fabric-finished'], function () {
-    return gulp.watch(Config.paths.lessPath + '/**/*', Plugins.batch(function (events, done) {
+    return gulp.watch(Config.paths.sassPath + '/**/*', Plugins.batch(function (events, done) {
         Plugins.runSequence('Fabric', 'Fabric-updated', done);
     }));
 });

gulp/FabricComponents.js

@@ -47,10 +47,10 @@ gulp.task('FabricComponents-moveJs', function () {
 });
 
 //
-// LESS tasks
+// Sass tasks
 // ----------------------------------------------------------------------------
 
-// Build Components LESS files
+// Build Components Sass files
 gulp.task('FabricComponents-buildAndCombineStyles', function () {
     var stream = gulp.src(BuildConfig.srcPath + '/Fabric.Components.' + BuildConfig.fileExtension)
         .pipe(Plugins.plumber())

gulp/modules/BuildConfig.js

@@ -1,11 +1,15 @@
 /** Class for working adding banners to files */
+var Config = require('./Config');
+var Plugins = require('./Plugins');
+var ErrorHandling = require('./ErrorHandling');
+
 var BuildConfig = function() {
-  this.srcPath;
-  this.processorPlugin;
-  this.fileExtension;
-  this.template;
-  this.compileErrorHandler;
-  this.processorName;
+  this.srcPath = Config.paths.srcSass;
+  this.processorPlugin = Plugins.sass;
+  this.fileExtension = Config.sassExtension;
+  this.template = 'component-manifest-template.scss';
+  this.compileErrorHandler = ErrorHandling.SASSCompileErrors;
+  this.processorName = "sass";
 };
 
 module.exports = new BuildConfig();

gulp/modules/ComponentHelper.js

@@ -15,7 +15,7 @@ var ComponentSamplesHelper = function() {
      * @param {string} destFolder Contains the path to the destination folder.
      * @param {string} srcTemplate Contains the path to the source template to be applied.
      * @param {string} componentName Name of the component.
-     * @param {string} deps LESS Dependencies to be added to the styles.
+     * @param {string} deps Sass Dependencies to be added to the styles.
      * @param {function} cssPlugin The gulp plugin or function used for the specific css preprocessor
      * @return {stream} returns a stream.
      */

gulp/modules/Config.js

@@ -6,15 +6,13 @@ var pkg = require('../../package.json');
  */
 var Config = function() {
   this.debugMode = false;
-  this.lessExtension = "less";
   this.sassExtension = "scss";
   this.buildSass = false;
   this.copyRightMessage = "Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.";
 	var distPath = 'dist';
 	var srcPath = 'src';
 	this.paths = {
 		distComponents: distPath + '/components',
-		distLess: distPath + '/less',
     distSass: distPath + '/sass',
 		distCSS: distPath + '/css',
 		distSamples: distPath + '/samples',
@@ -25,7 +23,6 @@ var Config = function() {
 		srcSamples: srcPath + '/samples',
     srcSass: srcPath + '/sass',
 		componentsPath : 'src/components',
-		srcLess: srcPath + '/less',
 		templatePath : srcPath + '/templates'
 	};
 	this.port =  process.env.PORT || 2020;
@@ -57,8 +54,7 @@ var Config = function() {
 		{src: this.paths.distComponents, dest: "/content/components/"},
 		{src: this.paths.distCSS, dest: "/content/css/"},
 		{src: this.paths.distJS, dest: "/content/scripts/"},
-		{src: this.paths.distLess, dest: "/content/less/"},
-        {src: this.paths.distSass, dest: "/content/sass/"}
+    {src: this.paths.distSass, dest: "/content/sass/"}
 	];
   this.componentSamplesUpdate = "Components Samples updated successfully! Yay!";
   this.componentSamplesFinished = ' Component Samples build was successful! Yay!';