Stylelint-sass-render-errors NPM

stylelint-sass-render-errors

Display Sass render errors and deprecations as lint errors.

Implementation details:

Sass deprecations are treated same as errors since Sass tries to move language forward and each deprecation should be corrected as soon as possible in your codebase
Plugin operates on each file in isolation so if you have global @import statements, they won’t be applied and you could get errors for e.g. undefined variables. Recommendation is to switch to Sass modules and @use/@forward statements
Sass (only Dart Sass is supported) should be installed as peer dependancy because each version has different set of errors and deprecations and you should get results for Sass version your application uses

Install

npm install stylelint-sass-render-errors --save-dev

Usage

Add this config to your .stylelintrc:

{
	"plugins": ["stylelint-sass-render-errors"],
	"rules": {
		"plugin/sass-render-errors": true
	}
}

@use 'sass:color';
@use 'sass:math';

.becky {
    color: color.invert(1);
/**        ↑
 * Passing a number (1) to color.invert() is deprecated. Recommendation: invert(1). */
}

#marley {
    width: math.percentage(100 / 2);
/**                        ↑
 * Using / for division is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div(100, 2). More info and automated migrator: https://sass-lang.com/d/slash-div. */
}

Options

Plugin accepts either boolean (true) or object configuration.

If boolean, it will use default configuration:

sass.render for rendering Sass files and resolving errors and deprecations
Undefined functions are not checked
No options for Sass renderer other than file if file is linted or data if CSS string is linted

If object configuration, following properties are valid:

sync

Type: boolean
Default: false

Rendering mode for Sass render. Can be either false for sass.compileAsync and sass.compileStringAsync or true for sass.compile and sass.compileString.