Grunt Setup of Stylelint linting SCSS-Files based on postcss-scss and postcss-reporter

readme.md

Example configuration of Stylelint with Grunt.

Stylelint will lint the SCSS source files and show some formatted warnings in console thanks to postcss-reporter. Sass-Files will be compiled via grunt-sass and postcss-autoprefixer deals with the vendor stuff.

Main credits go to https://github.com/insomniac-xt for helping me setting things up.

Gruntfile.js

var path = require('path');
var fs = require('fs');

module.exports = function (grunt) {

    'use strict';

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        sass: require('./grunt/sass')(grunt),

        postcss: require('./grunt/postcss')(grunt)
    });

    grunt.registerTask('css', ['postcss:scsslint', 'sass', 'postcss:autoprefixer']);

};

package.json

{
  "name": "application-name",
  "version": "0.0.1",
  "deploy": "dist",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-postcss": "0.8.0",
    "stylelint": "6.5.1",
    "postcss-scss": "0.1.6",
    "postcss-reporter": "1.3.3",
    "autoprefixer": "6.3.3",
    "grunt-sass": "1.1.0"
  }
}

postcss.js

module.exports = function(grunt) {

    'use strict';

    grunt.loadNpmTasks('grunt-postcss');

    var path = require('path');
    var deploy = '<%= pkg.deploy %>';

    return {
        scsslint: {

            options: {

                writeDest: false,

                syntax: require('postcss-scss'),

                processors: [
                    require('stylelint')(), // reads the .stylelintrc file where the configuration is kept
                    require('postcss-reporter')({
                        clearMessages: true
                    })
                ]
            },

            files: [{
                expand: true,
                cwd: 'src/scss',
                src: ['*.scss'] // you should exclude your used mixin files here
            }]

        },


        autoprefixer: {

            options: {
                processors: [
                    require('autoprefixer')({browsers: 'last 2 versions'})
                ]
            },

            files: [{
                expand: true,
                cwd: deploy + '/css',
                src: ['*.css'],
                dest: deploy + '/css',
                ext: '.css'
            }]
        }
    }
};

sass.js

module.exports = function(grunt) {

    'use strict';

    grunt.loadNpmTasks('grunt-sass');

    var path = require('path');
    var deploy = '<%= pkg.deploy %>';

    return {
        // Sass
        options: {
            outputStyle: 'compressed'
        },
        dist: {
            files: [{
                expand: true,
                cwd: 'src/scss',
                src: ['*.scss'],
                dest: deploy + '/css',
                ext: '.css'
            }]
        }
    }
};

stylelintrc

{
  "rules": {
    "at-rule-no-vendor-prefix": true,
    "block-closing-brace-newline-after": null,
    "block-no-empty": null,
    "block-opening-brace-newline-after": "always",
    "block-opening-brace-space-before": null,
    "color-no-hex": true,
    "color-hex-case": "lower",
    "block-no-single-line": true,
    "color-no-invalid-hex": true,
    "color-named": "never",
    "comment-empty-line-before": "always",
    "declaration-bang-space-after": null,
    "declaration-bang-space-before": null,
    "declaration-block-single-line-max-declarations": null,
    "declaration-colon-newline-after": null,
    "declaration-colon-space-after": "always",
    "declaration-colon-space-before": "never",
    "declaration-block-no-duplicate-properties": null,
    "declaration-block-no-shorthand-property-overrides": true,
    "declaration-block-trailing-semicolon": "always",
    "declaration-no-important": null,
    "font-family-name-quotes": "always-where-recommended",
    "font-weight-notation": "numeric",
    "indentation": 2,
    "max-empty-lines": 2,
    "max-line-length": null,
    "max-nesting-depth": 4,
    "no-browser-hacks": true,
    "no-duplicate-selectors": null,
    "no-eol-whitespace": true,
    "no-invalid-double-slash-comments": true,
    "no-missing-eof-newline": null,
    "no-unknown-animations": true,
    "number-leading-zero": "never",
    "number-max-precision": 3,
    "number-no-trailing-zeros": true,
    "number-zero-length-no-unit": true,
    "property-blacklist": null,
    "property-no-vendor-prefix": true,
    "property-unit-blacklist": {"font-size": ["px"]},
    "property-whitelist": null,
    "rule-nested-empty-line-before": "always",
    "rule-non-nested-empty-line-before": "always",
    "selector-class-pattern": null,
    "selector-combinator-space-after": "always",
    "selector-combinator-space-before": "always",
    "selector-id-pattern": null,
    "selector-list-comma-newline-after": "always",
    "selector-list-comma-newline-before": null,
    "selector-list-comma-space-after": "never-single-line",
    "selector-list-comma-space-before": null,
    "selector-no-attribute": null,
    "selector-no-combinator": null,
    "selector-no-id": true,
    "selector-no-type": null,
    "selector-no-universal": null,
    "selector-no-vendor-prefix": null,
    "selector-pseudo-element-colon-notation": "single",
    "selector-pseudo-element-case": "lower",
    "selector-pseudo-class-no-unknown": true,
    "selector-root-no-composition": true,
    "string-quotes": "double",
    "string-no-newline": true,
    "time-no-imperceptible": null,
    "value-list-comma-newline-after": "never-multi-line",
    "value-list-comma-newline-before": "never-multi-line",
    "value-list-comma-space-after": "always",
    "value-list-comma-space-before": "never",
    "value-no-vendor-prefix": true
  }
}