Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/RJWadley/stylelint-no-unsupported-browser-features
Disallow features that aren't supported by your target browser audience.
https://github.com/RJWadley/stylelint-no-unsupported-browser-features
browserslist css doiuse stylelint stylelint-plugin
Last synced: about 1 month ago
JSON representation
Disallow features that aren't supported by your target browser audience.
- Host: GitHub
- URL: https://github.com/RJWadley/stylelint-no-unsupported-browser-features
- Owner: RJWadley
- Created: 2017-04-06T16:39:59.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-01-25T17:52:22.000Z (8 months ago)
- Last Synced: 2024-05-23T07:05:04.182Z (4 months ago)
- Topics: browserslist, css, doiuse, stylelint, stylelint-plugin
- Language: JavaScript
- Homepage:
- Size: 290 KB
- Stars: 414
- Watchers: 9
- Forks: 20
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# stylelint-no-unsupported-browser-features
[](https://www.npmjs.com/package/stylelint-no-unsupported-browser-features)
[](https://github.com/ismay/stylelint-no-unsupported-browser-features/actions)
[](https://codecov.io/gh/ismay/stylelint-no-unsupported-browser-features)
[](https://github.com/semantic-release/semantic-release)
> disallow features that aren't supported by your target browser audience
This plugin checks if the CSS you're using is supported by the browsers you're targeting. It uses [doiuse](https://github.com/anandthakker/doiuse) to detect browser support. Doiuse itself checks your code against the [caniuse](http://caniuse.com/) database and uses [browserslist](https://github.com/ai/browserslist) to get the list of browsers you want to support. Doiuse and this plugin are only compatible with standard css syntax, so syntaxes like `scss`, `less` and others aren't supported
## Installation
```bash
$ npm install stylelint-no-unsupported-browser-features
```
Stylelint is a [peerdependency](https://nodejs.org/en/blog/npm/peer-dependencies/) of this plugin, so you'll have to install stylelint as well:
```bash
$ npm install stylelint
```
## Usage
1. Add `"stylelint-no-unsupported-browser-features"` to your stylelint config plugins array
2. Add `"plugin/no-unsupported-browser-features"` to your stylelint config rules
3. Enable the rule by setting it to `true`, or pass optional extra configuration
## Options
* `browsers`: optional. Accepts an array of browsers you want to support. For example `['> 1%', 'Last 2 versions']`. See [browserslist](https://github.com/ai/browserslist) for documentation.
* `ignore`: optional. Accepts an array of features to ignore. For example: `['rem', 'css-table']`. Feature names can be found in the error messages.
* `ignorePartialSupport`: optional, off by default. Accepts a boolean. When enabled:
* Rules that only trigger partial violations will be ignored.
* Rules that trigger both partial and full violations will only report on the full support violations.
* Rules that trigger only full support violations will not be affected.
So for example, in a `.stylelintrc`:
```json
{
"plugins": [
"stylelint-no-unsupported-browser-features"
],
"rules": {
"plugin/no-unsupported-browser-features": [true, {
"browsers": ["> 1%", "Last 2 versions"],
"ignore": ["rem"],
"ignorePartialSupport": true
}]
}
}
```
## Recommendations
This is a good rule to use with "warning"-level severity, because its primary purpose is to warn you that you are using features not all browsers fully support and therefore ought to provide fallbacks. But the warning will continue even if you have a fallback in place (it doesn't know); so you probably do not want this rule to break your build. Instead, consider it a friendly reminder to double-check certain spots for fallbacks.
Also, doiuse uses browserslist to get the list of browsers you want to support. Browserslist accepts a `browserslist` file at the root of your project with a list of browsers that you want to support. Since there are other projects that can use this file (like [autoprefixer](https://github.com/postcss/autoprefixer) or [eslint-plugin-compat](https://github.com/amilajack/eslint-plugin-compat)) the simplest solution is to define your intended browser support in this file. There are a lot of different ways to define this list. Check out the browserslist [documentation](https://github.com/browserslist/browserslist#config-file) for more options.
For the above setup you could use the following config:
`./.stylelintrc`
```json
{
"plugins": [
"stylelint-no-unsupported-browser-features"
],
"rules": {
"plugin/no-unsupported-browser-features": [true, {
"severity": "warning"
}]
}
}
```
`./browserslist`:
```text
> 5%
Last 2 versions
```
## Known issues
* [Visual Studio Code](https://code.visualstudio.com) users leveraging stylelint-no-unsupported-browser-features through the official [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) extension will need to restart VSCode after making changes to their browserslist configuration file. It seems that either VSCode or the extension are causing browserlist config files to be cached and are not watching for changes in the file. If you are relying on the `browsers` property within the rules section of `.stylelintrc` you can ignore this issue. Changes to the `browsers` property are discovered immediately.
## License
MIT