Merge pull request #16 from SmaatoUI/BT-148/feature/lintScss

[BT-148]: Added linting task for scss files

README.md

@@ -53,8 +53,8 @@ Copy assets from one location to another.
 
 ### compileCss
 
-Compile SCSS with Compass, and run the compiled CSS through PostCSS with
-Autoprefixer.
+Compile SCSS with Compass RubyGem (gem install compass), and run the compiled
+CSS through PostCSS with Autoprefixer.
 
 ### compileHtml
 
@@ -73,6 +73,10 @@ Deploy to an AWS S3 bucket.
 
 Lint JS with ESLint.
 
+### lintScss
+
+Lint SCSS with scss_lint RubyGem (gem install scss_lint).
+
 ### minifyCss
 
 Minify CSS with clean-css.

demo/gulpfile.js

@@ -108,6 +108,15 @@ gulp.task('demoLintJs', gulpTasks.lintJs({
   src: `${SOURCE_DIR}/**/*.js`,
 }).task);
 
+/**
+ * Lint SCSS.
+ */
+
+gulp.task('demoLintScss', gulpTasks.lintScss({
+  file: './scss-config.yml',
+  src: `${SOURCE_DIR}/**/*.scss`,
+}).task);
+
 /**
  *  Run unit tests.
  */

demo/scss-config.yml

@@ -0,0 +1,235 @@
+scss_files: "**/*.scss"
+plugin_directories: ['.scss-linters']
+
+# List of gem names to load custom linters from (make sure they are already
+# installed)
+plugin_gems: []
+
+linters:
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BemDepth:
+    enabled: false
+    max_elements: 1
+
+  BorderZero:
+    enabled: true
+    convention: zero # or `none`
+
+  ColorKeyword:
+    enabled: false
+
+  ColorVariable:
+    enabled: false
+
+  Comment:
+    enabled: false
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DisableLinterReason:
+    enabled: false
+
+  DuplicateProperty:
+    enabled: true
+
+  ElsePlacement:
+    enabled: true
+    style: same_line # or 'new_line'
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: true
+
+  EmptyRule:
+    enabled: true
+
+  ExtendDirective:
+    enabled: false
+
+  FinalNewline:
+    enabled: true
+    present: true
+
+  HexLength:
+    enabled: true
+    style: long # or 'short'
+
+  HexNotation:
+    enabled: true
+    style: lowercase # or 'uppercase'
+
+  HexValidation:
+    enabled: true
+
+  IdSelector:
+    enabled: true
+
+  ImportantRule:
+    enabled: true
+
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: false
+    allow_non_nested_indentation: true
+    character: space # or 'tab'
+    width: 2
+
+  LeadingZero:
+    enabled: true
+    style: include_zero # or 'exclude_zero'
+
+  MergeableSelector:
+    enabled: false
+    force_nesting: true
+
+  NameFormat:
+    enabled: false
+    allow_leading_underscore: true
+    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
+
+  NestingDepth:
+    enabled: true
+    max_depth: 5 # it was 3 initially
+    ignore_parent_selectors: false
+
+  PlaceholderInExtend:
+    enabled: false
+
+  PropertyCount:
+    enabled: false
+    include_nested: false
+    max_properties: 10
+
+  PropertySortOrder:
+    enabled: false
+    ignore_unspecified: false
+    min_properties: 2
+    separate_groups: false
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+
+  PropertyUnits:
+    enabled: true
+    global: [
+      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
+      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
+      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
+      'deg', 'grad', 'rad', 'turn',            # Angle
+      'ms', 's',                               # Duration
+      'Hz', 'kHz',                             # Frequency
+      'dpi', 'dpcm', 'dppx',                   # Resolution
+      '%']                                     # Other
+    properties: {}
+
+  PseudoElement:
+    enabled: false
+
+  QualifyingElement:
+    enabled: true
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 3
+
+  SelectorFormat:
+    enabled: false
+    convention: strict_BEM # or 'hyphenated_BEM', or 'hyphenated_lowercase', or 'snake_case', or 'camel_case', or a regex pattern
+
+  Shorthand:
+    enabled: true
+    allowed_shorthands: [1, 2, 3]
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: true
+
+  SingleLinePerSelector:
+    enabled: true
+
+  SpaceAfterComma:
+    enabled: true
+    style: one_space # or 'no_space', or 'at_least_one_space'
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceAfterVariableName:
+    enabled: true
+
+  SpaceAroundOperator:
+    enabled: true
+    style: one_space # or 'no_space'
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space # or 'new_line'
+    allow_single_line_padding: false
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+
+  StringQuotes:
+    enabled: true
+    style: single_quotes # or double_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingWhitespace:
+    enabled: true
+
+  TrailingZero:
+    enabled: true
+
+  TransitionAll:
+    enabled: false
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: true
+
+  UrlQuotes:
+    enabled: true
+
+  VariableForProperty:
+    enabled: false
+    properties: []
+
+  VendorPrefix:
+    enabled: true
+    identifier_list: base
+    additional_identifiers: []
+    excluded_identifiers: []
+
+  ZeroUnit:
+    enabled: true
+
+  Compass::*:
+    enabled: false

demo/src/index.scss

@@ -2,5 +2,5 @@
 body {
   font-family: sans-serif;
   background: rgba(black, 0.85);
-  color: #FFE930;
+  color: #ffe930;
 }

index.js

@@ -12,6 +12,7 @@ module.exports.deploy = require('./src/deploy');
 
 // Linting
 module.exports.lintJs = require('./src/lintJs');
+module.exports.lintScss = require('./src/lintScss');
 
 // Minification
 module.exports.minifyCss = require('./src/minifyCss');

package.json

@@ -29,6 +29,7 @@
     "gulp-postcss": "6.0.1",
     "gulp-rename": "1.2.2",
     "gulp-replace": "0.5.4",
+    "gulp-scss-lint": "0.3.8",
     "gulp-uglify": "1.4.2",
     "gulp-util": "3.0.7",
     "run-sequence": "1.1.4",

src/lintJs.js

@@ -18,7 +18,7 @@ module.exports = customConfig => {
       .pipe(gulpEslint.format())
       .pipe(gulpEslint.failAfterError())
       .on('error', () => {
-        throw new Error('Linting failed');
+        throw new Error('JS Linting failed');
       });
   }
 

src/lintScss.js

@@ -0,0 +1,28 @@
+
+const gulp = require('gulp');
+const gulpScssLint = require('gulp-scss-lint');
+
+module.exports = customConfig => {
+  const config = Object.assign({
+    file: undefined,
+    src: './src/**/*.scss',
+  }, customConfig);
+
+  if (!config.src) {
+    throw new Error('Invalid configuration: value of src needs to be a glob or an array of globs.');
+  }
+
+  // Lint SCSS with scss_lint.
+  function lintScss() {
+    return gulp.src(config.src)
+      .pipe(gulpScssLint({
+        config: config.file,
+      }))
+      .pipe(gulpScssLint.failReporter());
+  }
+
+  return {
+    task: lintScss,
+    config,
+  };
+};

src/lintScss.spec.js

@@ -0,0 +1,39 @@
+
+const gulp = require('gulp');
+const runSequence = require('run-sequence');
+const lintScss = require('../index').lintScss;
+
+describe('lintScss method', () => {
+  it('returns a config and a task', () => {
+    const result = lintScss();
+    expect(result).toEqual({
+      config: jasmine.any(Object),
+      task: jasmine.any(Function),
+    });
+  });
+
+  describe('configuration', () => {
+    it('throws errors when it contains falsy paths', () => {
+      expect(() => {
+        lintScss({
+          src: false,
+        });
+      }).toThrowError('Invalid configuration: value of src needs to be a glob or an array of globs.');
+    });
+  });
+
+  describe('gulp task', () => {
+    it('completes successfully', (done) => {
+      gulp.task('testLintScss', lintScss().task);
+
+      /**
+       * Because the Gulp task is async, we need to use runSequence to execute
+       * the task and then call the `done` async callback.
+       */
+      runSequence('testLintScss', () => {
+        expect(gulp.tasks.testLintScss.done).toBe(true);
+        done();
+      });
+    });
+  });
+});