Display Sass render errors and deprecations as lint errors.
npm install stylelint-sass-render-errors[![Build Status][ci-img]][ci]
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
``sh`
npm install stylelint-sass-render-errors --save-dev
Add this config to your .stylelintrc:
`json`
{
"plugins": ["stylelint-sass-render-errors"],
"rules": {
"plugin/sass-render-errors": true
}
}
`scss
@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. /
}
`
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 deprecationsfile
- Undefined functions are not checked
- No options for Sass renderer other than if file is linted or data if CSS string is
linted
If object configuration, following properties are valid:
Type: boolean false
Default:
Rendering mode for Sass render. Can be either false for sass.compileAsync andsass.compileStringAsync or true for sass.compile and sass.compileString.
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.
Type: boolean false
Default:
Type: string[] []
Default:
List of disallowed known CSS functions.
Type: string[] []`
Default:
List of additional known CSS functions.
MIT © Ivan Nikolić
[ci]: https://github.com/niksy/stylelint-sass-render-errors/actions?query=workflow%3ACI
[ci-img]: https://github.com/niksy/stylelint-sass-render-errors/actions/workflows/ci.yml/badge.svg?branch=master