Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/niksy/stylelint-sass-render-errors

Display Sass render errors and deprecations as lint errors.
https://github.com/niksy/stylelint-sass-render-errors

Last synced: 7 days ago
JSON representation

Display Sass render errors and deprecations as lint errors.

Awesome Lists containing this project

README

        

# 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](https://github.com/sass/libsass/issues/2822#issuecomment-482914373)
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](https://sass-lang.com/documentation/modules) and
[`@use`/`@forward` statements](https://sass-lang.com/documentation/at-rules/use)
- 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

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

## Usage

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. */
}
```

## 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`.

### sassOptions

Type: `string|sass.Options|sass.StringOptions`

If object, it is either
[`sass.Options`](https://sass-lang.com/documentation/js-api/interfaces/options/) or
[`sass.StringOptions`](https://sass-lang.com/documentation/js-api/interfaces/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](https://github.com/sindresorhus/resolve-from) relatively from the
[closest `package.json` location](https://github.com/sindresorhus/pkg-up) inside current working
directory.

### checkUndefinedFunctions

Type: `boolean`
Default: `false`

[Check undefined functions](https://github.com/niksy/sass-render-errors#undefined-functions).

### disallowedKnownCssFunctions

Type: `string[]`
Default: `[]`

[List of disallowed known CSS functions](https://github.com/niksy/sass-render-errors#options).

### additionalKnownCssFunctions

Type: `string[]`
Default: `[]`

[List of additional known CSS functions](https://github.com/niksy/sass-render-errors#options).

## License

MIT © [Ivan Nikolić](http://ivannikolic.com)

[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