stylelint-sass-render-errors

Display Sass render errors and deprecations as lint errors.

Usage no npm install needed!

<script type="module">
  import stylelintSassRenderErrors from 'https://cdn.skypack.dev/stylelint-sass-render-errors';
</script>

README

stylelint-sass-render-errors

Build Status

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.render or true for sass.renderSync. This way you can leverage faster rendering without using Fibers.

sassOptions

Type: string|SassOptions

If object, it is Sass options object. For detailed explanation see node-sass options reference.

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

Check undefined functions.

disallowedKnownCssFunctions

Type: string[]
Default: []

List of disallowed known CSS functions.

License

MIT © Ivan Nikolić