Updates Patternfly HTML,LESS,JS Linting

* Adds HTMLHint for HTML linting and fixes issues with HTML linter
* Adds Stylelint for Less linting and fixes formatting issues in Less
* Adds autoprefixer for auto generating CSS prefixes, and removes old prefixes in Less which are now generated
* Removes JSHint and adds ESLINT for Javascript linting. Fixes to patternfly.js for ESLINT settings

Author: priley86

.htmlhintrc

@@ -0,0 +1,22 @@
+{
+  "tagname-lowercase": true,
+  "attr-lowercase": true,
+  "attr-value-double-quotes": true,
+  "attr-value-not-empty": false,
+  "attr-no-duplication": true,
+  "doctype-first": false,
+  "tag-pair": true,
+  "tag-self-close": false,
+  "spec-char-escape": true,
+  "id-unique": true,
+  "src-not-empty": true,
+  "head-script-disabled": false,
+  "img-alt-require": true,
+  "doctype-html5": false,
+  "id-class-value": false,
+  "style-disabled": false,
+  "space-tab-mixed-disabled": true,
+  "id-class-ad-disabled": true,
+  "href-abs-or-rel": false,
+  "attr-unsafe-chars": true
+}

.stylelintrc

@@ -0,0 +1,54 @@
+{
+  "rules": {
+    "color-hex-case": "lower",
+    "color-no-invalid-hex": true,
+    "function-calc-no-unspaced-operator": true,
+    "function-comma-space-after": "always-single-line",
+    "function-comma-space-before": "never",
+    "function-name-case": "lower",
+    "function-url-quotes": "always",
+    "function-whitespace-after": "always",
+    "number-leading-zero": "never",
+    "number-no-trailing-zeros": true,
+    "string-no-newline": true,
+    "string-quotes": "double",
+    "unit-case": "lower",
+    "unit-no-unknown": true,
+    "unit-whitelist": [
+      "px",
+      "%",
+      "deg",
+      "ms",
+      "em",
+      "vh"
+    ],
+    "value-list-comma-space-after": "always-single-line",
+    "value-list-comma-space-before": "never",
+    "value-no-vendor-prefix": true,
+    "shorthand-property-no-redundant-values": true,
+    "property-case": "lower",
+    "declaration-block-no-duplicate-properties": true,
+    "declaration-block-no-ignored-properties": true,
+    "declaration-block-trailing-semicolon": "always",
+    "declaration-block-semicolon-space-before": "never",
+    "declaration-block-semicolon-space-after": "always-single-line",
+    "declaration-block-semicolon-newline-before": "never-multi-line",
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always-multi-line",
+    "block-no-empty": true,
+    "block-opening-brace-newline-after": "always-multi-line",
+    "block-opening-brace-space-before": "always-multi-line",
+    "selector-attribute-brackets-space-inside": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-operator-space-before": "never",
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "selector-pseudo-element-case": "lower",
+    "selector-pseudo-element-colon-notation": "single",
+    "selector-pseudo-element-no-unknown": true,
+    "selector-type-case": "lower"
+  }
+}

Gruntfile.js

@@ -1,16 +1,18 @@
 /*global module,require*/
 module.exports = function (grunt) {
-  // load all grunt tasks
-  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
+  'use strict';
 
   // configurable paths
   var projectConfig = {
     dist: 'dist',
     src: ''
   };
 
+  // load all grunt tasks
+  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
+
   try {
-      projectConfig.src = require('./bower.json').appPath || projectConfig.src;
+    projectConfig.src = require('./bower.json').appPath || projectConfig.src;
   } catch (e) {}
 
   grunt.initConfig({
@@ -77,6 +79,16 @@ module.exports = function (grunt) {
         }
       }
     },
+    jekyll: {
+      options: {
+        src: 'tests/pages'
+      },
+      tests: {
+        options: {
+          dest: 'dist/tests'
+        }
+      }
+    },
     cssmin: {
       production: {
         files: [{
@@ -91,41 +103,6 @@ module.exports = function (grunt) {
         }
       }
     },
-    jekyll: {
-      options: {
-        src: 'tests/pages'
-      },
-      tests: {
-        options: {
-          dest: 'dist/tests'
-        }
-      }
-    },
-    jslint: {
-      client: {
-        src: [
-          'src/js/patternfly.js'
-        ],
-        directives: {
-          // node environment
-          node: false,
-          // browser environment
-          browser: true,
-          // allow dangling underscores
-          nomen: true,
-          // allow todo statements
-          todo: true,
-          // allow unused parameters
-          unparam: true,
-          // add predefined libraries
-          predef: [
-            'jQuery',
-            'Event'
-          ],
-          indent: 2
-        }
-      }
-    },
     less: {
       patternfly: {
         files: {
@@ -179,11 +156,11 @@ module.exports = function (grunt) {
       },
       css: {
         files: ['dist/css/patternfly*.css', 'dist/css/!*.min.css'],
-        tasks: ['cssmin', 'csscount']
+        tasks: ['cssmin','csscount']
       },
       js: {
         files: ['src/js/*.js'],
-        tasks: ['jslint', 'uglify', 'copy:js']
+        tasks: ['eslint', 'uglify', 'copy:js']
       },
       livereload: {
         files: ['dist/css/*.css', 'dist/js/*.js', 'dist/tests/*.html', '!tests/pages/*.html']
@@ -196,6 +173,45 @@ module.exports = function (grunt) {
       unit: {
         configFile: 'karma.conf.js'
       }
+    },
+    htmlhint: {
+      html: {
+        src: ['dist/tests/**/*.html'],
+        options: {
+          htmlhintrc: '.htmlhintrc'
+        }
+      }
+    },
+    eslint: {
+      options: {
+        configFile: 'eslint.yaml'
+      },
+      target: [
+        'Gruntfile.js',
+        'src/js/**/*.js'
+      ]
+    },
+    stylelint: {
+      src: ['less/*.less']
+    },
+    postcss: {
+      options: {
+        processors: [
+          require('pixrem')(), // add fallbacks for rem units
+          require('autoprefixer')({browsers: ['last 3 versions', 'ie 9']}) // add vendor prefixes,
+        ]
+      },
+      dist: {
+        files: [
+          {
+            expand: true,     // Enable dynamic expansion.
+            cwd: 'dist/css/',      // Src matches are relative to this path.
+            src: ['*.css'], // Actual pattern(s) to match.
+            dest: 'dist/css'   // Destination path prefix.
+          }
+        ]
+      }
+
     }
   });
 
@@ -204,9 +220,12 @@ module.exports = function (grunt) {
     'jekyll',
     'less',
     'cssmin',
+    'postcss',
     'csscount',
-    'jslint',
-    'uglify'
+    'eslint',
+    'uglify',
+    'htmlhint',
+    'stylelint'
   ]);
 
   grunt.registerTask('server', [

eslint.yaml

@@ -0,0 +1,46 @@
+---
+env:
+  browser: true
+  node: true
+
+globals:
+  $: true
+
+rules:
+  strict: [2, "function"]
+  quotes: 0
+  camelcase: 2
+  indent: [2, 2]
+  new-cap:
+    - 2
+    - {"newIsCap": true, "capIsNew": false}
+  no-mixed-spaces-and-tabs: 2
+  no-multiple-empty-lines: 2
+  no-trailing-spaces: 2
+  keyword-spacing:
+    - 2
+    - {"after": true }
+  space-before-blocks: 2
+  space-before-function-paren: 2
+  space-infix-ops: 2
+  brace-style: 2
+  semi: 2
+  block-scoped-var: 2
+  consistent-return: 2
+  curly: 2
+  eqeqeq: 2
+  guard-for-in: 2
+  no-else-return: 2
+  no-loop-func: 2
+  vars-on-top: 2
+  no-debugger: 2
+  no-cond-assign: 2
+  no-console: 2
+  no-extra-semi: 2
+  no-irregular-whitespace: 2
+  dot-notation:
+    - 2
+    - {"allowPattern": "^[a-z]+(_[a-z]+)+$"}
+
+ecmaFeatures:
+  blockBindings: true

less/blank-slate.less

@@ -2,7 +2,7 @@
 // Blank Slate
 // --------------------------------------------------
 
-.blank-slate-pf{
+.blank-slate-pf {
   @media (min-width: @screen-sm-min) {
     padding: (@jumbotron-padding * 2) (@jumbotron-padding * 2);
   }
@@ -15,15 +15,15 @@
   margin-bottom: 20px;
   padding: @jumbotron-padding;
   text-align: center;
-  .blank-slate-pf-icon{
+  .blank-slate-pf-icon {
     color: @gray-light;
     font-size: (@font-size-h1 * 2.4);
     line-height: (@font-size-h1 * 2.4);
   }
-  .blank-slate-pf-main-action{
+  .blank-slate-pf-main-action {
     margin-top: @line-height-computed;
   }
-  .blank-slate-pf-secondary-action{
+  .blank-slate-pf-secondary-action {
     margin-top: @line-height-computed;
   }
 }

less/card-view.less

@@ -48,7 +48,7 @@
       font-size: ceil((@font-size-base * 1.5));
       margin-right: 2px;
     }
-    .col-lg-2 & { font-size: @font-size-h3 }
+    .col-lg-2 & { font-size: @font-size-h3; }
   }
   .card-pf-top-element .card-pf-icon-circle {
     border: 2px solid @color-pf-blue-300;

less/cards.less

@@ -141,11 +141,11 @@
   font-size: @font-size-h3;
   margin-top: @line-height-computed;
   margin-bottom: (@line-height-computed / 2);
-  [class^='col'] & {
+  [class^="col"] & {
     margin-top: 0;
   }
   @media (max-width: @screen-xs-max) {
-    .card-pf-body [class^='col'] + [class^='col'] > & {
+    .card-pf-body [class^="col"] + [class^="col"] > & {
       margin-top: (@grid-gutter-width);
     }
   }
@@ -202,10 +202,8 @@
   width: 100%;
   .card-pf-utilization-card-details-count,
   .card-pf-utilization-card-details-description {
-    display: table-cell;
     float: left;
     line-height: 1;
-    vertical-align: middle;
   }
   .card-pf-utilization-card-details-count {
     font-size: (@font-size-base * 2 + 2); // 26px

less/charts.less

@@ -89,7 +89,7 @@
 
 .line-chart-pf {
   .c3-zoom-rect {
-    opacity: 1.0 !important;
+    opacity: 1 !important;
     fill: @color-pf-black-100;
     stroke: @table-border-color;
     stroke-width: 1px;

less/datatables.less

@@ -17,7 +17,6 @@
 
 .ColVis_collection {
   background-color: @dropdown-bg;
-  border: 1px solid @dropdown-fallback-border; // IE8 fallback
   border: 1px solid @dropdown-border;
   border-radius: @border-radius-base;
   .box-shadow(0 6px 12px fade(@color-pf-black, 17.5%));
@@ -180,7 +179,6 @@ table.datatable {
     .sorting_asc_disabled,
     .sorting_desc_disabled {
       cursor: pointer;
-      *cursor: hand;
     }
     .sorting_asc,
     .sorting_desc {
@@ -201,7 +199,7 @@ table.datatable {
       }
       &:before {
         background: @link-color;
-        content: '';
+        content: "";
         height: 2px;
         position: absolute;
         left: 0;