Merge pull request #45 from briancwald/8.x-scss-lint-orgainzation-ref…

…acator

8.x scss lint orgainzation refacator

.gitignore

@@ -4,4 +4,4 @@ node_modules
 vendor
 
 # Dont add npm lock since we are using yarn.
-pacckage-lock.json
+package-lock.json

README.md

@@ -14,6 +14,7 @@ Material Design Inspired Admin Theme Utilizing the [Materialize CSS](http://mate
  - `gulp rename` renames conflict with jQueryUI and Materialize CSS autocomplete plugin and places it in /js/lib to manage in git repo.
  - `gulp sass` or `gulp` to watch sass changes
 
+
  ## Features Notes
 
  - Additional features supported with [Material Admin Support](https://github.com/briancwald/material_admin_support) module.
@@ -62,4 +63,4 @@ Since this is just a POC, code is not very well organized and needs to be mature
 - [x] Easy color swap in SCSS variables (_settings.scss)
 - [ ] Better way to handle Materialize CSS overrides
 - [ ] Prod deployment packaging (Min, optimize, etc)
-- [ ] Code standards + Lint
+- [x] Code standards + Lint

gulpfile.js

@@ -1,23 +1,20 @@
 'use strict';
-
 /*global require:true*/
 /*jshint esversion: 6 */
-
-var gulp        = require('gulp');
-var sourcemaps  = require('gulp-sourcemaps');
-var sass        = require('gulp-sass');
-const jshint    = require('gulp-jshint');
-const stylish   = require('jshint-stylish');
-var gulpCopy    = require('gulp-copy');
-var replace     = require('gulp-replace');
-var $           = require('gulp-load-plugins')();
-var refresh     = require('gulp-refresh');
-
+var gulp = require('gulp');
+var sourcemaps = require('gulp-sourcemaps');
+var sass = require('gulp-sass');
+var sassLint = require('gulp-sass-lint');
+const jshint = require('gulp-jshint');
+const stylish = require('jshint-stylish');
+var gulpCopy = require('gulp-copy');
+var replace = require('gulp-replace');
+var $ = require('gulp-load-plugins')();
+var refresh = require('gulp-refresh');
 // provide a paht to node modules 
 var sassPaths = [
   'node_modules'
 ];
-
 // Copy materialize and tablesaw libraries.
 gulp.task('libsrc', function() {
   gulp.src([
@@ -33,7 +30,6 @@ gulp.task('libsrc', function() {
     ])
     .pipe(gulpCopy('js/lib', { prefix: 3 }));
 });
-
 // Rename functions that conflict with jQueryUI; then move to source control folder js/lib
 gulp.task('rename', function() {
   gulp.src(['js/vendor/materialize.min.js'])
@@ -43,9 +39,13 @@ gulp.task('rename', function() {
     .pipe(replace('.tabs(', '.tabs_materialize('))
     .pipe(gulp.dest('js/lib'));
 });
-
 gulp.task('sass', function() {
-  return gulp.src(['scss/material_admin.scss'])
+  return gulp.src(['scss/**/**.scss'])
+    .pipe(sassLint({
+      configFile: 'scss/.sass-lint.yml',
+    }))
+    .pipe(sassLint.format())
+    .pipe(sassLint.failOnError())
     .pipe(sourcemaps.init())
     .pipe(sourcemaps.identityMap())
     .pipe($.sass({
@@ -59,14 +59,12 @@ gulp.task('sass', function() {
     .pipe(gulp.dest('css'))
     .pipe(refresh());
 });
-
 gulp.task('lint', function() {
   return gulp.src(['./js/*.js', '!./js/vendor.all.js'])
     .pipe(jshint())
     .pipe(jshint.reporter('jshint-stylish'));
 });
-
 gulp.task('default', ['sass'], function() {
-  refresh.listen(); 
+  refresh.listen();
   gulp.watch(['scss/**/*.scss'], ['sass']);
 });

package.json

@@ -14,6 +14,7 @@
     "gulp-refresh": "^1.1.0",
     "gulp-replace": "^0.5.4",
     "gulp-sass": "^3.1.0",
+    "gulp-sass-lint": "^1.3.4",
     "gulp-sourcemaps": "^2.6.0",
     "jshint": "^2.9.4",
     "jshint-stylish": "^2.2.1",

scss/.sass-lint.yml

@@ -0,0 +1,95 @@
+options:
+  formatter: stylish
+rules:
+  # Extends
+  extends-before-mixins: 1
+  extends-before-declarations: 1
+  placeholder-in-extend: 0
+
+  # Mixins
+  mixins-before-declarations: 1
+
+  # Line Spacing
+  one-declaration-per-line: 1
+  empty-line-between-blocks: 0
+  single-line-per-selector: 1
+
+  # Disallows
+  no-color-keywords: 1
+  no-color-literals: 1
+  no-css-comments: 0
+  no-debug: 1
+  no-duplicate-properties:
+  - 1
+  -
+    exclude:
+      - vertical-align
+  no-empty-rulesets: 1
+  no-extends: 0
+  no-ids: 0
+  no-important: 0
+  no-invalid-hex: 1
+  no-mergeable-selectors: 1
+  no-misspelled-properties:
+    - 1
+    -
+      'extra-properties':
+        - 'font-smooth'
+  no-qualifying-elements:
+    - 1
+    -
+      allow-element-with-attribute: true
+      allow-element-with-class: true
+      allow-element-with-id: true
+  no-trailing-zero: 1
+  no-transition-all: 1
+  no-url-protocols: 1
+  no-vendor-prefixes: 0
+  no-warn: 1
+
+  # Nesting
+  force-attribute-nesting: 0
+  force-element-nesting: 0
+  force-pseudo-nesting: 0
+
+  # Name Formats
+  function-name-format: 1
+  mixin-name-format: 1
+  placeholder-name-format: 1
+  class-name-format: 0
+  variable-name-format:
+    - 1
+    -
+      allow-leading-underscore: false
+
+  # Style Guide
+  border-zero: 1
+  brace-style: 1
+  clean-import-paths: 0
+  empty-args: 1
+  hex-length: 1
+  hex-notation: 1
+  indentation: 1
+  leading-zero: 0
+  nesting-depth: 0
+  property-sort-order:
+    - 1
+    - order: concentric
+  quotes: 1
+  shorthand-values: 1
+  url-quotes: 1
+  variable-for-property: 1
+  zero-unit: 1
+
+  # Inner Spacing
+  space-after-comma: 1
+  space-before-colon: 1
+  space-after-colon: 1
+  space-before-brace: 1
+  space-before-bang: 1
+  space-after-bang: 1
+  space-between-parens: 1
+
+  # Final Items
+  trailing-semicolon: 1
+  final-newline: 1

scss/_color_schema.scss

@@ -5,40 +5,34 @@
 
 // AVAILABLE COLOR PALETTE VARIABLES
 // red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey
-
 //   $your-colors: (
-//   "base":       #29aae1,
-//   "lighten-1":  #49b7e6,
-//   "lighten-2":  #6fdcff,
-//   "lighten-3":  #69c4ea,
-//   "lighten-4":  #94d5f0,
-//   "lighten-5":  #e5f5fb,
-//   "darken-1":   #24a3dd,
-//   "darken-2":   #1f99d9,
-//   "darken-3":   #1990d5,
-//   "darken-4":   #0f7fcd,
-//   "accent-1":   #fafdff,
-//   "accent-2":   #c7e6ff,
-//   "accent-3":   #94d0ff,
-//   "accent-4":   #7ac4ff
+//   'base':       #29aae1,
+//   'lighten-1':  #49b7e6,
+//   'lighten-2':  #6fdcff,
+//   'lighten-3':  #69c4ea,
+//   'lighten-4':  #94d5f0,
+//   'lighten-5':  #e5f5fb,
+//   'darken-1':   #24a3dd,
+//   'darken-2':   #1f99d9,
+//   'darken-3':   #1990d5,
+//   'darken-4':   #0f7fcd,
+//   'accent-1':   #fafdff,
+//   'accent-2':   #c7e6ff,
+//   'accent-3':   #94d0ff,
+//   'accent-4':   #7ac4ff
 // );
-
 // $colors: map-merge($colors, (your-colors: $your-colors));
-
-
 // These represent the Color Palette. SEE _settings.scss for more detailed overrides
 // See: http://materializecss.com/color.html
-
 // MAIN
 $primary: 'blue';
 $secondary: 'materialize-red';
 $accent: 'teal';
 $action: 'orange';
 $utility: 'grey'; // This most likely wont change.
-
 // VARIOUS HELPERS
-$black: color("shades", "black");
-$white: color("shades", "white");
+$black: color('shades', 'black');
+$white: color('shades', 'white');
 $success-color-base: 'grey';
 $error-color-base: 'red';
 $warning-color-base: 'yellow';