Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Grunt Setup of Stylelint linting SCSS-Files based on postcss-scss and postcss-reporter

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.

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']);
};
{
"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"
}
}
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'
}]
}
}
};
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'
}]
}
}
};
{
"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
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment