niksystylelint-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
@importstatements, they won’t be applied and you could get errors for e.g. undefined variables. Recommendation is to switch to Sass modules and@use/@forwardstatements - 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-devUsage
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.renderfor rendering Sass files and resolving errors and deprecations- Undefined functions are not checked
- No options for Sass renderer other than
fileif file is linted ordataif 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.
sassOptions
Type: string|sass.Options|sass.StringOptions
If object, it is either
sass.Options or
sass.StringOptions.
If string, it is config file location which returns one of the following default exports:
- Sass options object
- Async or regular function returning Sass options object
Config file location is resolved relatively from the
closest package.json location inside current working
directory.
checkUndefinedFunctions
Type: boolean
Default: false
disallowedKnownCssFunctions
Type: string[]
Default: []
List of disallowed known CSS functions.
additionalKnownCssFunctions
Type: string[]
Default: []
List of additional known CSS functions.
License
MIT © Ivan Nikolić