Remove sass-lint and replace with stylelint. Create new stylelintrc and install new dependencies. (#264)

Author: matsieftw

.stylelintrc

@@ -0,0 +1,54 @@
+{
+    "plugins": [
+        "stylelint-scss",
+        "stylelint-declaration-block-order"
+    ],
+    "rules": {
+        number-leading-zero: always,
+        value-list-comma-newline-after: always,
+        value-list-comma-space-after: always,
+        declaration-bang-space-after: always,
+        declaration-bang-space-before: never,
+        declaration-colon-space-after: always,
+        declaration-colon-space-before: never,
+        declaration-no-important: true,
+        declaration-block-no-duplicate-properties: true,
+        declaration-block-no-ignored-properties: true,
+        declaration-block-no-redundant-longhand-properties: true,
+        declaration-block-semicolon-newline-after: always,
+        declaration-block-single-line-max-declarations: 1,
+        declaration-block-trailing-semicolon: always,
+        block-closing-brace-empty-line-before: never,
+        block-closing-brace-newline-after: always,
+        block-closing-brace-space-before: always,
+        block-no-empty: true,
+        block-no-single-line: true,
+        block-opening-brace-newline-after: always-multi-line,
+        block-opening-brace-space-before: always-single-line,
+        selector-no-id: true,
+        at-rule-semicolon-newline-after: true,
+        at-rule-no-unknown: true,
+        at-rule-name-case: lower,
+        comment-empty-line-before: always,
+        comment-no-empty: true,
+        comment-whitespace-inside: always,
+        indentation: 2,
+        max-nesting-depth: 1,
+        no-duplicate-selectors: true,
+        no-eol-whitespace: true,
+        no-extra-semicolons: true,
+        no-invalid-double-slash-comments: true,
+        no-missing-end-of-source-newline: true,
+        "plugin/declaration-block-order": [
+        {
+            type: 'at-rule',
+            name: extend
+        },
+        {
+            type: 'at-rule',
+            name: mixin
+        },
+            'declarations'
+        ]
+    }
+}

gulpfile.js

@@ -15,8 +15,8 @@ var gulp        = require('gulp'),
     plumber     = require('gulp-plumber'),
     deploy      = require('gulp-gh-pages'),
     notify      = require('gulp-notify'),
-    sassLint    = require('gulp-sass-lint'),
-    twig        = require('gulp-twig'),
+    twig        = require('gulp-twig');
+    gulpStylelint = require('gulp-stylelint')
     runSequence = require('run-sequence'),
     del         = require('del');
 
@@ -94,11 +94,35 @@ gulp.task('site-scss', function() {
     .pipe(reload({stream:true}));
 });
 
-gulp.task('sass-lint', function () {
-  gulp.src('scss/**/*.scss')
-    .pipe(sassLint())
-    .pipe(sassLint.format())
-    .pipe(sassLint.failOnError());
+gulp.task('browser-sync', function() {
+    browserSync({
+        server: {
+            baseDir: "site"
+        }
+    });
+});
+
+gulp.task('deploy', function () {
+    return gulp.src('site/**/*')
+        .pipe(deploy());
+});
+
+gulp.task('lint-css', function lintCssTask() {
+  const gulpStylelint = require('gulp-stylelint');
+  const myStylelintFormatter = require('my-stylelint-formatter');
+
+  return gulp
+    .src('src/**/*.css')
+    .pipe(gulpStylelint({
+      failAfterError: true,
+      reportOutputDir: 'reports/lint',
+      reporters: [
+        {formatter: 'verbose', console: true},
+        {formatter: 'json', save: 'report.json'},
+        {formatter: myStylelintFormatter, save: 'my-custom-report.txt'}
+      ],
+      debug: true
+    }));
 });
 
 gulp.task('jshint', function() {

package.json

@@ -31,13 +31,18 @@
     "gulp-imagemin": "^3.0.3",
     "gulp-notify": "^2.2.0",
     "gulp-plumber": "^1.1.0",
+    "gulp-postcss": "^6.2.0",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^2.3.2",
-    "gulp-sass-lint": "1.2.0",
     "gulp-size": "^2.1.0",
+    "gulp-stylelint": "^3.4.0",
     "gulp-twig": "~0.5.0",
     "gulp-uglify": "^2.0.0",
     "imagemin-pngquant": "^5.0.0",
+    "postcss-reporter": "^1.4.1",
+    "stylelint": "^7.5.0",
+    "stylelint-declaration-block-order": "^0.2.0",
+    "stylelint-scss": "^1.3.4"
     "run-sequence": "^1.2.2"
   }
 }

sass-lint.yml

@@ -1208,16 +1208,13 @@ img {
 .demo__list {
   width: 100%;
   display: -webkit-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
-  -webkit-flex-wrap: wrap;
-      -ms-flex-wrap: wrap;
-          flex-wrap: wrap; }
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap; }
 
 .demo__item {
   margin: .75em;